React Native Fetch File Upload Error

Question

I am trying to use fetch to upload an image file to my server. Here is my code that I am using:

var formData = new FormData();
    formData.append('photo', {uri: './tempImageStore/image.jpg', name: 'photo', type: 'image/jpg'});

and

       <Button
         onPress={() => fetch('http://localhost:8000/upload', {
           method: 'POST',
           headers: {
             "Accept": "multipart/form-data",
             "Content-Type": "multipart/form-data"
           },
             body: formData
           })
         }
         title={'Upload File'}
       />

However when I run my app and press the Upload File button, I get an error saying:

I am not sure what I am doing wrong or if this is even the proper way to upload photos to a server.

In case you won't get it to work: I've had luck with this library. RN Fetch Blob. — Viktor Sec
– Viktor Sec, Commented May 7, 2017 at 0:28
I like that library much better, but I have gotten an error with that too: stackoverflow.com/questions/43835848/… — zoecarver
– zoecarver, Commented May 8, 2017 at 2:58

Juorder Gonzalez · Accepted Answer · 2017-05-25 03:00:21Z

3

Yes is it possible upload an image only with fetch API.

I was facing the same issue, I solved it with this:

first, please make sure to remove the file// at the beginning of the URL, you could do something like this

const fileURL = "file:///Users/juordergonzalezquinonez/Library/Developer/CoreSimulator/Devices/046E9C13-5D5D-4463-82DD-256501874EBF/data/Containers/Data/Application/839C5E04-46BB-4F9B-BF53-3FDFF639F340/tmp/react-native-image-crop-picker/C07E6B9E-3113-41C2-AD80-A768DF33C263.jpg";
const cleanURL = fileURL.replace("file://", "");

then in the fetch request, make sure that your headers must be like this:

headers: {
  'Accept': 'application/json',
  'Content-Type': 'multipart/form-data;'
},

edited May 25, 2017 at 3:00

answered May 25, 2017 at 2:46

Juorder Gonzalez

1,6521 gold badge10 silver badges10 bronze badges

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

2 Comments

rolznz Over a year ago

I was still able to upload a file with the "file://" prefix.

Banid Azin Over a year ago

In Android you need the "file://" prefix and in IOS you must remove the "file://" prefix

Collectives™ on Stack Overflow

React Native Fetch File Upload Error

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related