skip to Main Content

My laravel backend can’t upload or move a file in my directory UPLOAD FOLDER. I think my file request is a string, that’s why the move upload is not working. I don’t know if that’s the problem.

I am using React JS and useLoader Data and Form from react-router-dom as my frontend.
And customize axiosClient

Here is the error on console.log

Network

enter image description here

Console.log

enter image description here

Here is my export default ProductAdd

export default function ProductAdd(){
    const [image,setImage] = useState(null)

    const imageHandler = (e) =>{
       setImage(e.target.files[0])
    }

       return(<Form  id="clear-form" method="post" replace>
             <div className="mb-4 relative">
                  <label >
                        File Picture
                    </label>
                 <input name="image" onChange={imageHandler} type="file" />
                </div>
                <div>
                <button type="submit
                    Create
                </button>
           </Form>)
     }

Here is my export ProductAddActionLoader

export const ProductAddActionLoader = async({ request }) =>{

    const formData = await request.formData();
    const payload = {
        image:formData.get('image'),
    }

    return await axiosClient.post('admin/fruit/create',payload).
        then(({data})=>{
            console.log(data)
            return data
        }).catch(error=>{
            console.log(error)
            return error
        })
}

Here is my router.jsx

         path:'create',
         element:<ProductAdd/>,
         action:ProductAddActionLoader

Here is my ProductController in my backend

public function create(Request $request){

       //return $request->image;
        $fileName = time().'.'.$request->image;
        $request->image->move(public_path('uploads'), $fileName);
        return response('Data has been Added',200);
    }

but when i uncomment return $request->image the name of the picture is returning.
but this $request->image->move(public_path('uploads'), $fileName); it’s not working and not uploading in my directory path

3

Answers


  1. you can do it:

    Storage::disk('local')->put('uploads' . '/' . $fileName , $request->image);
    
    Login or Signup to reply.
  2. I think you are transferring the file from js incorrectly, try transferring the file using this

     return await axiosClient.post('admin/fruit/create', formData)
    

    instead of

     return await axiosClient.post('admin/fruit/create', payload)
    
    Login or Signup to reply.
  3. You need to use multipart/form-data to upload files

    return await axiosClient.post('admin/fruit/create', payload, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).
    then(({data})=>{
        console.log(data)
        return data
    }).catch(error=>{
        console.log(error)
        return error
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search