File upload using .fetch() in ReactJS

Question

I am trying to upload file using .fetch() in ReactJS as Front End and Laravel as Back End. My ReactJS code is like below

update= (event) => {
let uploadImage =  event.target.file;
let form = new FormData()
form.append('uploadImage',uploadImage)

fetch('http://127.0.0.1:8000/api/addresses/upload', {
  headers: {
    'Authorization': 'Bearer ' + Auth.getToken(),
    'Content-Type': 'multipart/form-data',
  },
  method: "POST",
  body: form,
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}

My Laravel code is like below

public function fileUpload(StoreImageRequest $request)
    {
        $image           = $request->uploadImage;
        $imagename       = time() . $image->getClientOriginalName();
        $destinationPath = public_path('/images');
        $uploadValue     = $image->move($destinationPath, $imagename);
        if ($uploadValue) {
            return response()->json($imagename);
        }
    }

I am getting error like below

and

Where is the issue ?

Jordan Enev · Accepted Answer · 2018-06-07 09:06:46Z

1

It's because you upload the image with form field name avatar, but in your Laravel method you access it with uploadImage.

So you can try change it to the following:

$request->avatar

Please checkout the Laravel Files documentation and make sure you follow their best practices.

edited Jun 7, 2018 at 9:06

answered Jun 7, 2018 at 9:01

Jordan Enev

18.8k3 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abu abu Over a year ago

Thanks @Jordan Enev. But your solution is not working. Thanks.

Batur · Accepted Answer · 2020-11-16 09:49:31Z

0

I had the same issue. I fixed it by removing the content type.

Please check this article

https://upmostly.com/tutorials/upload-a-file-from-a-react-component

answered Nov 16, 2020 at 9:49

Batur

5495 silver badges9 bronze badges

Collectives™ on Stack Overflow

File upload using .fetch() in ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related