CODEWITHSUNDEEP
reactjsreact-nativeaxiosxmlhttprequest
Ryan Cocuzzo
Ryan Cocuzzo

Reputation: 3219

Send Image as Raw data Axios React Native

My backend accepts raw images & binary for the image upload (works in Postman), but on the React Native frontend I am using react-native-image-crop-picker to just get a uri for the image and so on.

I need to be able to send the image as its raw or binary form, rather than embed it in FormData.

I am using Axios for my requests.

How can I accomplish this?

Upvotes: 1

Views: 3184

Answers (4)

Fradow
Fradow

Reputation: 233

Add the includeBase64: true parameter when starting the picker.

Afterwards, to send the image, you need to convert it in binary, see Convert base64 string to ArrayBuffer In my experience, @Yaan method worked, while atob didn't. Their function is listed on this github link: https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

Usage looks like this: Base64Binary.decode(image.data)

For example, to PUT an image after picking it:

ImagePicker.openPicker({
  width: 300,
  height: 300,
  mediaType: 'photo',
  includeBase64: true,
  cropping: true,
}.then(image => {
  axios.put('YOUR-URL', Base64Binary.decode(image.data));
});

Upvotes: 0

Waqas Ahmed
Waqas Ahmed

Reputation: 1421

You can use following code with react-native-image-crop-picker library and axios library.

ImagePicker.openPicker({
      compressImageMaxWidth: 300,
      compressImageMaxHeight: 300,
      mediaType: 'photo',
      cropping: true,
    })
      .then(({ path, mime }) => {
        if (path) {
          const file = {
            uri: path,
            name: path,
            type: mime,
          };
          const body = new FormData();
          body.append('file', file);
          uploadImage(body);
        }
      })
      .catch((e) => {
        console.log(e.message);
      });

where uploadImage has following implementation

const uploadImage = (data) => {
  const payload = {
    baseURL: AppConfig.BASE_URL,
    url: '/image',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    timeout: 120000,
    data,
  }
  axios(payload);
}

Upvotes: 1

knicholas
knicholas

Reputation: 530

According to react-native-image-crop-picker you can get the base64-encoded string by setting includeBase64 to true in the request object.

includeBase64 -- bool (default false) -- When set to true, the image file content will be available as a base64-encoded string in the data property. Hint: To use this string as an image source, use it like: <Image source={{uri: data:${image.mime};base64,${image.data}}} />

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true,
  includeBase64: true
}).then(image => {
  console.log(image.data);
});

Upvotes: 0

Fiston Emmanuel
Fiston Emmanuel

Reputation: 4859

With uri returned by react-native-image-crop-picker. Fetch image raw data (BLOB) as

const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", [IMG_URI_HERE], true);
    xhr.send(null);
  });

//  Your logic to upload BLOB  data to the server

  // We're done with the blob, close and release it
  blob.close();

Upvotes: 0

Related Questions