Upload image using formdata in react-native

Question

How can i upload file to server using react-native's fetch api Need to achieve something similar to this-

------WebKitFormBoundaryRAxza9ew2ADaYHn5
Content-Disposition: form-data; name="file"; filename="66154520.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryRAxza9ew2ADaYHn5--

Possible duplicate of stackoverflow.com/questions/32441963/…. — BradByte
– BradByte, Commented Nov 23, 2016 at 13:14
We use base64 to upload images from device to server. This way data that we send is always same type - no need to define different type for each different format image (jpg, png, bmp ... etc.). And we never had any issues with that, on server just convert back from base64. — Aleksandar Popovic
– Aleksandar Popovic, Commented Nov 24, 2016 at 0:28

biphobe · Accepted Answer · 2016-11-24 09:41:14Z

21

You didn't show any kind of code, but in theory...

You should pass url from something like ImagePicker or CameraRoll (which should look similar to file:///storage/emulated/0/Pictures/shj15791-4v61-67g6-z1b6-v8451z956j5k.jpg) to formData and then pass it along with the request:

const form = new FormData();

form.append('image', {
  uri: "file:///...",
  type: 'image/jpg',
  name: 'image.jpg',
});

fetch('https://example.com/api/upload', {
  method: 'POST',
  body: form
});

answered Nov 24, 2016 at 9:41

biphobe

4,8793 gold badges37 silver badges47 bronze badges

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

3 Comments

Shivam Over a year ago

It doesnt give the required(in the question) output. rather it displays [object Object]

MichaelMao Over a year ago

so you will get a from data with file uri not file stream/binary/blob. I don't know how it can work

phatmann Over a year ago

Fetch will covert the local URI to a stream/binary/blob for you.

Rajesh N · Accepted Answer · 2020-12-05 10:48:52Z

This works for me. tested in Android and iOS for camera and gallary

const os = Platform.OS

    let data = new FormData();
    if (os == 'android') {
      const fileName = new Date().getTime() + getExtention(mime);
      let fileInfo = '';
      await RNFS.copyFile(uri, RNFS.CachesDirectoryPath + '/' + fileName).catch(e => {
        fileInfo = undefined;
      });
      
      if (!fileInfo) {
        fileDetail = await RNFS
          .stat(RNFS.CachesDirectoryPath + '/' + fileName)
          .catch(e => {});
        data.append('file', {
          name: getFilename(fileDetail.path),
          type: payload.file.type,
          uri: 'file://' + fileDetail.path,
        });
      }

    } else {
      let  localPath= uri;
      if (!localPath.includes('private')) {
        localPath = localPath.replace('/var', '/private/var');
      }
      data.append('file', {
        name: getFilename(localPath),
        type: mime,
        uri: localPath.replace('file://', ''),
      });
    }

 export const getFilename = url => {
      return url.substr(url.lastIndexOf('/') + 1);
    };
    
export const getExtention = mime => {
  switch (mime) {
    case 'application/pdf':
      return '.pdf';
    case 'image/jpeg':
      return '.jpg';
    case 'image/jpg':
      return '.jpg';
    case 'image/png':
      return '.png';
    default:
      return '.jpg';
  }
};

Collectives™ on Stack Overflow

Upload image using formdata in react-native

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related