How To Send Image From Image Uri Through Http Request? (react Native And Django Backend)

I’m using Expo’s image picker and I’m getting this output: Object { 'cancelled': false, 'height': 468, 'uri': 'file:///data/user/0/host.exp.exponent/cache/ExperienceDat

Solution 1:

Another option is to convert your image to base64 and send the string. Downsize is that usually the base64 strings has a bigger size than the image itself.

Something like this:

functionreadImage(url, callback) {   
    var request = newXMLHttpRequest();
    request.onload = function() {
       var file = newFileReader();
       file.onloadend = function() {
          callback(file.result);
       }
       file.readAsDataURL(request.response);
    };   
    request.open('GET', url);   
    request.responseType = 'blob';              
    request.send(); 
}

Solution 2:

It has to be a local URI, there's no issues with that, how else are you going to point to the image.

Now to upload the image you should first wrap it inside of FormData:

// add this just above the axios requestlet img = new FormData();
img.append('file', { uri: imageUri });

Then inside of your axios request body add:

image: img,

EDIT: This question in it's current form is unanswerable.

I'm using the same Expo’s image picker with React-native in one of my projects as OP and everything works just fine, there's no issues with FormData.

After having talked with OP in a stackoverflow chat, couple of days ago, and stripping the request down to just an image, the server started throwing encoding errors:

UnicodeDecodeError:'utf-8' codec can't decode byte 0xff in position 168: invalid start byte

So the issue is with OP's Django backend not being setup correctly in parsing the image, and not with the sending of the image itself - which makes the question unanswerable.

Solution 3:

you cant use react-native-fetch-blob .....

importRNFetchBlobfrom" react-native-fetch-blob"PostRequest(PATH){
      RNFetchBlob.fetch('POST', "[URL]", {

            "x-session-id": "SESSION_ID", //or Custom headers'Content-Type': 'multipart/form-data',

        }, [

                { name: 'image', filename: 'vid.jpeg', data: RNFetchBlob.wrap(PATH) },
                // custom content type

            ]).then((res) => {
                console.log(res)

            })
            .catch((err) => {
                console.log(err)
                // error handling ..
            })
        }
  }

for reference react-native-fetch-blob