How can I POST or PUT raw binary using react native

Question

I need to PUT an image file from the react native app to an pre-configured s3 upload URL. I saw an example with fetch that uploads the image as a binary via path, but it does so as a multi-part form upload. Because the s3 upload url can only take it as a raw binary in the body - and not as a content-type of multi-part, what's the syntax to PUT the raw binary image as the body using fetch or any other library in react native?

The following code uploads it as form data - which is not what I want to do.

          var photo = {
            uri: response.uri,
            name: fileName,
          };
          const body = new FormData();  // how can I do this not as a form?
          body.append('photo', photo);
          const results = await fetch('https://somes3uploadurl.com, {
            method: 'PUT',
            body,
          });

If https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-html5-js-fetch-api/36082038#36082038 is different from what you need to do, how is it different? (I mean other than PUT vs POST.) — sideshowbarker, Mar 23 '17 at 14:55
is FileReader also available in react native? if so do I just new up a filereader and look for an on event somehow? — MonkeyBonkey, Mar 23 '17 at 17:48
I ended up just using uploadcare so didn't get a chance to dig into it more. — MonkeyBonkey, Oct 31 '17 at 14:53
According to this issue, FileReader isn't implemented in RN as of now; https://github.com/facebook/react-native/issues/21209 — febeling, Apr 03 '19 at 13:22

score 17 · Accepted Answer · answered Nov 04 '17 at 10:23

It turns out you can send the file in multiple ways, including base64 and as a Buffer.

Using react-native-fs and buffer:

Uploading as base64 worked, but the image was damaged somehow. So i uploaded using a buffer:

export const uploadToAws = async (signedRequest, file) => {
  const base64 = await fs.readFile(file.uri, 'base64')
  const buffer = Buffer.from(base64, 'base64')
  return fetch(signedRequest, {
    method: 'PUT',
    headers: {
    'Content-Type': 'image/jpeg; charset=utf-8',
    'x-amz-acl': 'public-read',
   },
    body: buffer,
  })
}

Note that on the server, you need to make sure you are setting the correct Content-Type: { ContentType: "image/jpeg; charset=utf-8", 'x-amz-acl': 'public-read' } as it seems fetch adds the charset to Content-Type.

It worked! Thank you very much! The thing is we need to use Buffer to prevent image from damage! — danhnn.uit, Nov 28 '17 at 04:07

whalemare · Answer 2 · 2019-07-21T13:07:35.703

You also may use next solution:

  /**
   * @param {{contentType: string, uploadUrl: string}} resourceData for upload your image
   * @param {string} file path to file in filesystem 
   * @returns {boolean} true if data uploaded
   */
  async uploadImage(resourceData, file) {
    return new Promise((resolver, rejecter) => {
      const xhr = new XMLHttpRequest();

      xhr.onload = () => {
        if (xhr.status < 400) {
          resolver(true)
        } else {
          const error = new Error(xhr.response);
          rejecter(error)
        }
      };
      xhr.onerror = (error) => {
        rejecter(error)
      };

      xhr.open('PUT', resourceData.uploadUrl);
      xhr.setRequestHeader('Content-Type', resourceData.contentType);
      xhr.send({ uri: file });
    })
  }

And call this function from your code like:

  let isSuccess = await uploadImage({
    contentType: "image/jpeg",
    uploadUrl: "http://my.super.web.amazon.service..."
  }, "file:///path-to-file-in-filesystem.jpeg")

Source: https://github.com/react-native-community/react-native-image-picker/issues/61#issuecomment-297865475

This definitely needs to be the new accepted answer. Reading the file into base64 and posting can be extremely heavy on memory usage. This method does not cause such an issue as it is reading from the filesystem directly. — Daniel Abdelsamed, Jul 20 '19 at 06:06

score 0 · Answer 3 · edited Sep 08 '20 at 08:09

You don't need to use react-native-fs or that buffer library. Instead just read the file in using https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer as pass the result to fetch's body parameter. readAsBinaryString and readAsDataUrl gave me weird results.

Note: I didn't have to append "; charset=utf-8" either to my content-type header.

Example:

const fileReader = new FileReader();
fileReader.addEventListener('load', (event: any) => {
  const buffer = event.target.result;
  return fetch(link.url, {
    method: 'PUT',
    body: buffer,
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(
          `${response.status}: ${response.statusText}`
        );
      }
      return response;
    })
    .then(resolve, reject);
});
fileReader.addEventListener('error', reject);
fileReader.addEventListener('abort', reject);
fileReader.readAsArrayBuffer(file);

What parameter should one pecify to readAsArrayBuffer? I have an image selected with react-native-image-picker and all I have is a file uri (starting with content://) and a file path — nicecatch, Apr 05 '18 at 08:47
Care to show an example? The issue here suggests this API isn't in place yet though; https://github.com/facebook/react-native/issues/21209 — febeling, Apr 03 '19 at 13:13

score 0 · Answer 4 · answered Aug 18 '23 at 13:31

This worked for me without any external dependencies.

If the fetch method is provided a URI that is on the device it will return the contents of that file, so just pass in the local file path.

export const getBlob = async (fileUri) => {
  const resp = await fetch(fileUri)
  const imageBody = await resp.blob()
  return imageBody
}

export const uploadImage = async (uploadUrl, fileUri) => {
  const imageBody = await getBlob(fileUri)

  return fetch(uploadUrl, {
    method: 'PUT',
    body: imageBody,
  })
}

How can I POST or PUT raw binary using react native

4 Answers4