Geek Answers Handbook

How to send an image from a Uri image via an HTTP request? (React Native and Django Backend)

Im using the Expos image picker, and Im gets this output:

Object { "cancelled": false, "height": 468, "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540jbaek7023%252Fstylee/ImagePicker/9a12f0a3-9260-416c-98a6-51911c91ddf4.jpg", "width": 468, }

I could make my image, but I realized that the URL is the local URI of the phones .

I use Redux-Thunk and Axios to send an HTTP POST request:

 export const sendPost = ( imageUri, title, content ) => async dispatch => { let response = await axios.post(`${ROOT_URL}/rest-auth/registration/`, { image, <<<<- I can't put image uri here :( it LOCAL path title, content }) if(response.data) { dispatch({ type: POST_CREATE_SUCCESS, payload: response.data.token }) } else { dispatch({ type: POST_CREATE_FAIL }) } }

UPDATE I changed the request

 let headers = { 'Authorization': `JWT ${token}`}; if(hType==1) { headers = { 'Authorization': `JWT ${token}`}; } else if (hType==2) { headers = { 'Authorization': `Bearer ${token}`}; } let imageData = new FormData(); imageData.append('file', { uri: image }); let response = await axios.post(`${ROOT_URL}/clothes/create/`, { image: imageData, text, bigType, onlyMe ... }, {headers});

!! sorry for the complexity, but the name of the image variable; image - uri for the image. I did not want to change the name of the original variable name

and on the server, print

 'image': {'_parts': [['file', {'uri': 'file:///data/user/0/host.exp.exponent /cache/ExperienceData/%2540jbaek7023%252Fstylee/ ImagePicker/78f7526a-1dfa-4fc9-b4d7-2362964ab10d.jpg'}]]}

I found that gzip compression is a way to send image data. Does it help?

+6
javascript image reactjs react-native
source share
3 answers

Another option is to convert the image to base64 and send the string. The downside is that usually base64 strings are larger than the image itself.

Something like that:

 function readImage(url, callback) { var request = new XMLHttpRequest(); request.onload = function() { var file = new FileReader(); file.onloadend = function() { callback(file.result); } file.readAsDataURL(request.response); }; request.open('GET', url); request.responseType = 'blob'; request.send(); }
+4
source

It should be a local URI, no problem with that, how else are you going to point to the image.

Now, to load an image, you must first transfer it inside FormData:

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

Then inside your axios request body add:

 image: img,

EDIT . This question is not possible in this current form.

I use the same Expos image picker with React-native in one of my projects as OP, and everything works fine, there are no problems with FormData.

After talking with OP in stackoverflow chat, a couple of days ago and removing the request to the whole image, the server started throwing encoding errors:

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

So the problem is that the OP Django backend is not configured correctly when analyzing the image, and not when sending the image itself, which makes the question irrefutable.

+3
source

you cannot use reaction-native-fetch-blob .....

 import RNFetchBlob from " 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

+2
source

More articles:


All Articles