How to Upload File/Image to Server with Form Data in React Native

[@orkhannabiev9192]

Thank you!! You saved me from a three-day struggle.🔥🔥🔥

[@JASACADAMY]

Glad I could help!

[@sushmarodrick12]

You mentioned to stringify object when sending data but you are sending object without stringifying and it still works. How?

[@rtdev8512]

you no need to stringify file object, stringify only needed if you send non file object

[@Jeancympoycoding]

Bro the Backend must be hosted right ? because I tried to upload image and Video from the local the I got a message like " Load image Failed.

[@ezra9383]

Am facing an error from the fetch function "Network failed... how should i resolve this"

[@JASACADAMY]

please check server .try in postman first

[@maganramkrishna]

I am also facing same Network failed error. I checked everything thoroughly , configuration, URL all fine. Same is working while calling with postman. Please suggest..

[@sagivalia5041]

Hey there. And how do you access it in the frontend? Like for example: a guy uploads his avatar and it should all be fetched in the rendering, how do I send him the image? through the generated image link or the image's bytes?

[@JASACADAMY]

generated link will be a image url.it can display in html using img src

[@sagivalia5041]

@@JASACADAMY Can it be displayed with the Image component in react-native?

[@namithareddy5496]

Thank you so much, very helpful.

[@JASACADAMY]

Glad it was helpful!

[@Ganesh-sp5vm]

Thank you , it worked !!!

[@Zero-qc5nu]

I have question while uploading image and file using document picker using form data i got a network error sometimes and sometimes I am not getting this error in Android itz working fine in ios

[@JASACADAMY]

Have you given the permission

[@KingsleyOkeze]

How do you give permission?

[@Zero-qc5nu]

@@JASACADAMY yes

[@Zero-qc5nu]

@@KingsleyOkeze yes by using react native permission

[@j0s3805]

Hi sir, I want to send my sign up user data with the image in the same call , How can i do this ? I send my user info using body raw JSON, but i want to send the image, I can send all in the form-data?

[@JASACADAMY]

yes you can.append with formdata

[@mohammadrezadehghani3866]

what should i do when i want to upload blob as form data?? becuase reactnative get network error when i append blob to form data🤔🤔 do you have any solution?!!

[@JASACADAMY]

formdata.append("blob",blob,filename)

[@qwer-dn2wq]

you saved my life...

[@JASACADAMY]

thanks for feedback 👍

[@yuval_silver8888]

what you do in the api {STAGE_URL}/user/upload/image to make an public url for the photo from the formData that we sent in the request?

[@JASACADAMY]

it is an API hosted in our server.we will not able to share that url .you can checkout any documentation for uploading file in s3 using nodejs

[@omaralaufi4865]

Thanks, when a user upload files the first process to create file with user display name and then upload images? Can u help on this

[@nthiwafelix7967]

Thanks...

[@JASACADAMY]

Welcome

[@vithursanthevendran1009]

I am from Sri Lanka. I watched the video and wrote the code accordingly, but the file is not getting transferred from front end to database.

[@JASACADAMY]

which servee are using?does it work in postman

[@JASACADAMY]

which servee are using?does it work in postman

[@vithursanthevendran1009]

@@JASACADAMY I am using Laravel php as backend and mysql as database. Moreover, it IS working in postman

[@suyashvashishtha4904]

​@@vithursanthevendran1009 You need to transfrom the body in axios req, { responseType: "json", headers: headers, transformRequest: (data, headers) => { return bodyFormData; }, data: bodyFormData, }

[@vithursanthevendran1009]

@@suyashvashishtha4904 Thank you for the answer. Actually the issue was solved about a month ago. But i will try your method as well

[@imrankhan-fn7ne]

hy your tutorial is very help full I am using reanimated2, that's why I have to use flipper debugger please make a tutorial

[@reznov00]

Could you show the backend api code too so we know how the image is being handled?

[@JASACADAMY]

H.i you can checkout nodejs formdata with s3 doc

[@נאורכהן-ת5כ]

@@JASACADAMY can you give us a link for something you recommanded?

[@JASACADAMY]

@@נאורכהן-ת5כ stackoverflow.com/questions/40494050/uploading-image-to-amazon-s3-using-multer-s3-nodejs

[@osmankhalid2005]

Here is the backend PHP code:

[@mantritech1082]

I am following same process but image not updating But on postman its working fine Here is code for laravel backend api if ($request->hasFile('img')) { $img = '/uploads/users/'.time().'.'.$request->img->extension(); $request->img->move(public_path('uploads/users'), $img); $input['img'] = $img; } Is this compatible with our method Please tell me know how i can solve it

[@JASACADAMY]

does formdata is creating currectly?

[@aviseksahoo1953]

How to apply flipper in usb connected device ?

[@JASACADAMY]

fbflipper.com/ flipper is a debugging tool for latest react native.

[@JASACADAMY]

just install in your device it will automatically debug if you are using latest version of react native

[@aviseksahoo1953]

@@JASACADAMY Is it require to install openSSl to use flipper and I have install but I am using my phone device through USB connect , in that situation flipper not connected , please help , thanks in advamce

[@aqibabbasi1332]

how to retrieve it and show in react-native

[@JASACADAMY]

it will ve return url that can display using image api from react native

[@arsalanahmed1161]

i just do one mistake but now I did it "("Content-Type", 'multipart/form-data')" its important

[@JASACADAMY]

thanks for feedback 👍

[@juniormelo26]

Muito Show, parabéns.

[@JASACADAMY]

thanks for feedback 👍

[@santhoshpanjalavlogs3587]

How reject selected file before upload ?

[@JASACADAMY]

check FormData properly

[@hitul1412]

possible unhandled promise rejection esi error aa rahi h

[@JASACADAMY]

check your formdata.does api is working in postman?

[@hitul1412]

But I don't use formdata when I click button After that error display

[@jyotish40]

how to upload another data including image in form data

[@JASACADAMY]

you can add more field using formdta.append

[@davinderkumar6685]

Very helpful keep it up 👌

[@JASACADAMY]

thanks for feedback 👍

[@ArjunYadav-np4fh]

How to Upload File/Image to PHP Server in React Native, please explain or create a video on this topic.

[@LucasHanchop]

Its almost the same...

[@adnanmaulana8642]

how about upload multiple files

[@JASACADAMY]

this.state.selectedImages.forEach((item, i) => { data.append("file", { uri: item.uri, type: "image/jpeg", name: item.filename || `filename${i}.jpg`, }); });

[@JASACADAMY]

loop through the array

[@adnanmaulana8642]

@@JASACADAMY Thankyouu !!

[@adnanmaulana8642]

if we upload pdf, what the type should be written

[@JASACADAMY]

@@adnanmaulana8642 application/pdf

[@philmongere6667]

thanks @JAS ACADAMY

[@JASACADAMY]

thanks for feedback 👍

[@azatazamatov8820]

cool video

[@JASACADAMY]

Thanks

[@ParamvirSingh-h5w]

thanks🤩

[@JASACADAMY]

You're welcome 😊

[@willyhorizont8672]

subscribed!

[@JASACADAMY]

thanks

[@karandeepsingh7000]

When I choose mediaType: 'video', the video folder in my gallery apppears for a second and then disappear. so i am not able to choose videos. please help.

[@JASACADAMY]

check the documentation of image picker and permission