Send Image File to server using post api with Dio in Flutter

hi everyone welcome back to my channel in this video I'll be talking about how to send your image file onto the server with the help of post API with Dio package so here is the demo in in this what I will do I will select image from the gallery and I have also checked the permissions for that I'm running this app for the second time so it will not ask for the permissions I will uninstall and install this again for you to show how it will ask for permissions just for for now I'm just going to select image from the gallery and this is the image and I have selected there is the preview here and also our image is submitted to the database if you will open the console it is showing image uploaded successfully and file uploaded is the response from the server if it will go inside this this is the print message image uploaded successfully and this is the response that I am printing here which is filed uploaded and if you will check the database I have created the node.js API here and inside this uploads you will see the particular image and I I will also start node.js series for creating apis so please subscribe to my channel for further updates and if you will check the postman also here when your file is uploaded it will give you response like file uploaded so without any delay let's get started so for that first of all for this you will have to install Dio package image picker for choosing the image from gallery or camera and this permission handle permission Handler basically for handling the permissions and also you will have to apply permissions in Android manifest like for camera permission and also bright external storage permission for accessing your gallery and for iOS you will have to add these two lines for using photo library and camera here in this project I am using cam I'm not using camera I'm using gallery but if you are using camera then you will have to add these permissions so first of all this is my home screen and here I have taken x file uh by the name of picked file and then I have created instance of this class where I am hitting the API so I am calling it here I'm creating instance of this class and this is the method upload image so I'm calling here upload server sorry upload service and inside this I inside this build method first of all this is stateful widget and inside this build method this is normal app bar and inside Center what I am doing here I am just checking the visibility if picked file is not equal to null it means there is data inside big file then what it will do it will again check for the widget it will first of all it is checking for the visibility because when I'm not when there is no image selected then this space is not taken by the image that is why I have used here visibility and for this widget and basically I am checking again picked file not equal to null if it is null if if it is not null then uh what I will do I will show the image like image dot file and inside this I have taken like it will take what it will take file so pick file dot path and I have change x file into file because image dot file will take file it will not take x file that is why I am converting in converting it and I am taking giving I am giving here the height and width of 200 you can keep according to your use and suppose if pick file is null then it will return compare container and after that in this column after this I have used a little bit of space and then there's the button button what is doing here it is just checking for the permission first of all it is taking for the permission whether we have allowing the permission or not if we will not allow the permission uh here I have used permission Handler package and these things are coming from that so for here I'm asking for camera permission storage permission you can add plenty of things here and then you can also check individual permissions like here so if the permissions is not granted then it will return you can handle your error here like for showing toast or showing dialog boxes here like you haven't given permission you will have to give permission you can add here and if the permission has given then it will come inside come to this method picked image so what is this in method this method is written here so I have also created big image for async type of and what it will do I'm creating picker which is which is coming from the image picker that the package that I have taken initially and what it will do it will picker will take picture image from the gallery as I have written here picker dot pick image and the source will be image source dot Gallery if you want to take image from camera you can write here image source DOT camera so inside after that inside this big file our image from the gallery will be saved and what next next it will called upload service dot upload method from where upload service is coming so initially I have created instance of this class where I am calling the API so it is calling upload Services dot upload image and yes after selecting image from the gallery it will set State and what set state will do it will reload the screen that is why whenever I am selecting image from the gallery it is visible here so now upload Services dot upload image it will it is it has a parameter which is taking a file so let me go inside this this is upload image and what is the parameters here it will accept it will accept x file kind of file so as the image from the gallery is coming inside this picked file is also a x file kind of type and that is why we are changing here inside this because image file doesn't accept text file data that is why I am converting x file into file now let's come into this method it is also a sync type and basically we will have to put this code inside track hatch and I am creating here Dio instance and then I'm checking if pick file not equal to null then what we will do we will send this image file in the form of form data so I'm writing here create an instance of form data like form data dot form map and this is the parameters that I am using here if you will check here this is the parameter parameter and with the help of multi-part we send image file so we will use await here because it will take some time so multipart dot form file then picked file dot path this is the picked file and we will send path and it will be saved with the name of this image.jpg you can use current date or whatever you want you can use so finally response await diode.post this is the post method so we will use your diode.post and this is My URL you can replace your url here and in the data parameter we will put this form data and it will also take little bit of time so after that that is why I have used here await and after that we will check response dot status code equal to equal to 200 it means that my image data is saved in the database and it will show you success message and if there would be any error then it will say that image not uploaded or something happens with your internet then it will come inside cache and if suppose your API is you have using wrong API or anything or wrong happens that it will come inside this cache so you can apply your conditions here so let me run this app from the beginning and I will put the code source file on GitHub you can check that from there and I will put the link in the description box you can also check that let me run this app from the scratch so that I can show you full permission handling process and all those things for now in my database where I have created this node.js API there is only one file let me run this you can skip this part because I'm running this app from the scratch so it will take some time in the meanwhile I just want to tell you also that I am working on node.js apis so in future I will make video of node.js with JavaScript I will make get post delete apis also and will start work with flutter so my app has run so let me tap on this okay it is not asking for permission so what I will have to do I will have to just uninstall this let me uninstall this let me run this once again and I just want to request you to please support my channel that is why I could make enough video for you let me install it my app has installed and I'm going to press this button now it is asking for permission I'm giving the permission this is the image now what I will do I will tap on this I have selected this image this is the preview and also you will see inside my database there is one more image and this is the image so I hope that you have understand how to send post how to send image as uh in post API so that's it for now I hope to see you next time in our next video bye for now

Channel: thecodeme

Views: 2,827

Keywords: send image file to server in flutter, post api in flutter, send image as multipart in flutter, image file through post api in flutter, flutter tutorial, flutter for beginner

Id: bDnwMXLDRpw

Length: 13min 24sec (804 seconds)

Published: Mon Jun 26 2023