fetch sends [object Object] instead of File object

Question

I'm using Expo and its ImagePicker to grab the image from gallery. It returns both uri and base64.

Now I want to upload the image in a multipart/form-data request.

The problem is that the server only accepts File while below code sends [object Object] instead.

const formData = new FormData();

const data = {
  jwt,
};

formData.append('message', JSON.stringify(data));

formData.append('avatar', {
  uri: avatar,
  type: 'image/png',
  name: 'avatar.png'
});

fetch(url, {
  method: 'POST',
  body: formData,
  headers: {
    Accept: 'application/json',
  },
})

Since I'm using Expo I'm limitted to libraries that it supports. Also adding Content-Type header doesn't work at all and server can't even recognize the message.

same issue for me . not able to resolve this issue. Does anyone have done this? — Anuj
– Anuj, Commented Aug 30, 2018 at 10:46
I'm having the same issue but on React Native CLI. The file is the actual file object up until I append it to the FormDate, at which point it becomes the string [object Object] — Ash West
– Ash West, Commented Sep 29, 2022 at 15:48

Roysh · Accepted Answer · 2022-12-06 19:09:15Z

1

If you see that file being sent as [object object] in your request params, that might occur due to two reasons:

The file that you are sending is not a file (or not a file object). A FormData should only receive a File or a Blob object in order to be sent on a request. Note that you have the right keys on your object and that it is indeed a File or a Blob.
As mentioned, it might be the Content-Type header which should not be set

edited Dec 6, 2022 at 19:09

answered Nov 22, 2019 at 18:28

Roysh

1,5503 gold badges17 silver badges26 bronze badges

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

1 Comment

salzo Over a year ago

In the OP's case, is probable that the URI (avatar in uri: avatar) is a data URI. In that case, it'd be required to Convert Data URI to File then append to FormData.

Inderjeet · Accepted Answer · 2022-10-26 09:03:55Z

0

For React, if you want to upload image and avoid [object object] error, there is a need to setFile for input type handleChange

const file = event.target.files[0]    
setFile({
    picturePreview: URL.createObjectURL(event.target.files[0]),
    pictureAsFile: event.target.files[0]
})

And then calling in formData like:

formData.append('file_attachment', file.pictureAsFile)

Full working example here: https://youtu.be/yTGXNvHQ4BQ

answered Oct 26, 2022 at 9:03

Inderjeet

14 bronze badges

Collectives™ on Stack Overflow

fetch sends [object Object] instead of File object

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related