React native web upload file with form data

Expo SDK
1

Please provide the following:

  1. SDK Version: 37
  2. Platforms(Android/iOS/web/all): Web

Hi
I’m trying to upload a file in RN with expo.
It works well with Android but when I try it on the web but I get an Error.
My code looks like examples/with-formdata-image-upload at master · expo/examples · GitHub in both client and server (server upload to memory instead of S3)

 const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [1, 1],
        quality: 1,
      });

const {uri} = result
// in android uri is file://data/user/0/host.ep.....jpg
// in the web uri is data:image/png;base64,iS3ks...

async function uploadImageAsync(uri) {
const formData = new FormData();
  formData.append('photo', {
    uri,
    name: `photo.${fileType}`,
    type: `image/${fileType}`,
  });

  let options = {
    method: 'POST',
    body: formData,
    headers: isWeb ? null : {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
  };

I remove the headers from web because I had issue with the boundary.
Now I have problem with the web in the backend - multer does not initialize the req.file
Does anyone succeed uploading file in Expo in React Native Web?

2

Hello, am having a similar issue. Trying to upload an audio file on react native web using expo, the base 64 uri does not work and causes my Audio.Sound().loadasync() to crash

3

Same issue as well for me. I am using .net core api in the backend and api doesn’t know to convert this data:image/png;base64,… to IFormFile in .net. Did any able to send the image on the web?

4

Hi folks, any solution on this also on the same boat right now. On web it is giving error of headers and boundary while post call to my springboot rest api please need help.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.