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

hi guys in this lecture i am going to explain how to upload an image in react native using form data for explaining this lecture i have already created one api uses as upload slash image in this api i am going to upload a form data image so for this one i need to check body here the key is file i am going to select one file choose file i'm going to upload this one see it's returning a result with uploaded status app if i copy this image you can see the images have already uploaded into server and it returns a reurl so this image is uploaded as a form data now i am going to replicate this in reactniti for that one i already created one project in my desktop you can see image upload so how to create this project you can run the command in px react native init image upload it will create a reactivity project i already created i am going to run this project in my device so for that one i need to just comment npm run android so it will install the project in my device yes installing the app yes the project installation is completed it will ask yes now my project is running on device i am opening my vs code to see the a code yes this is my code which is running on device now i am going to remove all other unwanted things i am going to remove all this style here this all section i am going to remove and this section also so i'm just making as a just functional component removing all other codes and i am going to import one button here and inside this code and just creating a view view style flex equal to one alien items sender justify content sender fine then just put this in the same line fine now i am going to create a button here button title i can give just uh upload okay fine i'm closing the button here now if i refresh the screen i can see a button here with all upload text okay now i am going to implement the uploading functionality in this button for that we need to get the image first i am going to install one cool library react native image picker so i am going to install this one so yarn add image speaker so i'm going to install the library for selecting the image from our gallery as this include native changes i am going to run the project once more npm run android yes it's completed installation now what i need is whenever i am clicking on the button it should open the image gallery for that one what i am going to do i am going to import this one here we can remove other imports which is we are not using okay fine we just added the image uh this one i am only going to use launch image library not using camera for now here we can just create one function const open gallery okay now inside this one i what i need i need to open the image so we can check check the code here you can see the code here const await i need to make this sync so i'm going to make this a thing fine now i need options so for checking the options we can just go to the uh examples here click on the repository example src yeah app.js file yes you can see different examples here i am going to copy image on this one okay so just copy this one i'm going to create an object here const options we can remove this include extra area yeah other ones work fine okay title is there library is there we are going to pick media type is photo if you want to pick video you can just change into video so i am going to here i am going to pick photo only so i can just set the limit also to 1 yes fine now we can just console this one console log we can just check images fine now i am going to open my flipper for getting the console go to the application open the flipper yes flipper is opened is we can just go to the logs yes it will connect to our package sir now click on the upload button yes we didn't call that function so we can just scroll that function on on press just open gallery now again open the flipper and click on the upload button so we are getting an error cannot find launch camera so we have some error so yes it should be launch image with library node camera so you can just change it to launch image it library again refresh the function just go to here clear all log now click on upload button yes it's open the gallery i am going to file manager download we have one image here just select ok see i am getting the response image response fine so now i am going to upload this image as a form data clear in this lecture i am going to explain little bit about form data form that is the way of sending data or file to the server so we can just create a key value pair using form data from data interface provide a way to easily construct a set of key value pairs representing form field and their values now how to create a form data you can create a form data using form data new form data now if you are sending a form data you should always declare content type is equal to multipart slash form data the content content type should be always multi-part slash form data now the way to declare a form data is const form data is equal to new form data so it will create a form data object now if you want to append a value how can append a value form data dot append the key and the value so it should be always append key and the value now what are the value accepted by form data one blob value will be accepted file and string this all values you can send through form data now it will not accept array okay you should every time you should remember from data will not accept array so if you want to send a form that array in the form data you should stringify that array also same for object if you want to send an object you should signify that object form data only accept blob blob file string okay so this should be care whenever we are creating a form data whenever we are sending a form data to the server now we can continue our coding we already record the response from the library so if you just open the device select one image click ok yes you can see the image response is coming here right so i can just response or we can just uh change the name into images okay now images it is inside assets array so we can just copy this assets of zero now if i just run the device once more we can just select one image yes we are getting the response correctly we have a uri and we have a type file name so we are going to create a form data now as i already mentioned in the document how to create a form data you can create a form data using const form data new form data so i am going to create a form data here so const uh we can just say data or from data it should be an object form that clear no i am going to append the file here so how to open the file form data dot append right so my key here it is file so i am just copying this key here file clear it should be a string now i i need i need to append a file in this form data so for appending a file well you need to take care two three things one is uri type then name these three things are important you every time if you are appending a file there should be a uri and a type and a name so i am going to append this old value here so you are i the file path so file path is coming as 0 if you look into the response you can see file path is coming under uri so i can just copy this one you are right now the second thing is type type of the file so we can just copy the type here right images it should it is coming under the same path we can just add dot type if you look into the console you can see it is coming under the key type right now the next thing is name so it is not name we can just copy the key here name it is coming under the key value file name okay it is not name so you should copy this key file name right so we have successfully created a form data so form data if you have sending a file there should be three pair one is uri second thing is type and then third thing is name right now i am going to hit the api so we can just check a documentation here we can just go for react nati image upload using form data right we can just check out our documentation here this document yes fine now here we have under the image now we what we need we need to hit the api right so we can just copy the hitting part right so we can just spread just here so i need to change into my url which is i'm going to use here this url so i'm going to change it to my url how i already added that url here so i'm just scoping this url variable here and the method should be post and body should be data and the most important thing which i have mentioned in the slide every time if you are sending a form data the content type should be multipart slash form data so i'm just changing this one content type we don't want this semicolon we can remove this one multi-part form data every time if you are sending a form data the content type should be multi-part slash form data right now we need to make this json so we can just copy the json code here let response.jsn is equal to await right now i am going to print the response console.log response.json clear so the three thing is whenever you are appending a file you should append uri type name and the header should be content type multipart slash form data now i am going to hit the api once more we can just open the flipper i'm going to select one image let's see whether it is uploading correctly so i am going to select this image clicks okay right so we are getting a error cannot find variable data so we can just check out the document yes we don't declare form data we should body is form data so we can just try once more download i'm selecting one image yes see we are getting the same response as in place postman right yes you can see there will be a url and file name in the response also we are getting url response if i just click here you can see the image is uploaded correctly clear this is the way of how to send a form data into server so we have to im very careful about the sending file now if you want to send the array in the form data what you have to do form data dot append if you are sending an error this should be json it should be stringify json stringify array okay jsonstringify array whatever the array variable okay you should not send the array directly if you send an array here this api will give response because form data cannot append and it can only happen file blob and stream clear [Music] so we can jump into the next lecture

Channel: JAS ACADAMY

Views: 54,425

Keywords: JASACADAMY, Technical, Coding, React native, nodejs, Devops, News, e bull jet, interview tips, resume format, resume writing, career, communication, social meda, time management, polytechnic, diploma, Perfomance, development, udemy, google, covid, jasacadamy

Id: FVN3InBGvHA

Length: 17min 15sec (1035 seconds)

Published: Thu Jan 13 2022