Flutter upload image to rest API | flutter coding

in this vlog we will try to see the implementation  of an interesting topic which so many people of   you have requested before so that is uploading  an image from our flutter application and yes we   have successfully uploaded an image from android  device and ios device as well and we have got the   same output and also we have cleared the image  and try to re-upload the image so i hope this is   a clear tutorial for you to understand the concept  of uploading the image so violet let's get started so previously we have seen many examples regarding  the network calls like we have seen post and get   methods and now we will be making use of a post  call and try to upload an image to the server   so now here we are trying to add a dependency  here so it's http dependency i'm going to   add here so currently i'm not providing any  version but you may provide the latest version   available so now after adding our dependency  you need to get the dependencies and yes   now we are good to go so here i am just importing  the package and here we are declaring void main   and inside which we are providing run app and here we are specifying our default app my app  here so we are going to create a stateless widget   my app which is going to return a material  app and here inside the home we are going to   declare a scaffold and these are all the basic  things which i think you might have understood   following our previous tutorials as well but  as we are trying to do this tutorial for even   a novice a beginner to understand so i'm just  following every step from scratch again so here   i'm just providing the title like image upload  and we are going to consider a body inside which   we are going to consider a container why because  i just have a button that's all nothing more   than that so i just want a single child layout  here so that's what i am choosing a container   in a real time application you might require a  column or row depending upon your requirement   and here i am specifying a text button for which  we have on press and we are going to declare an   anonymous function for it and we also have a child  so here we are going to provide the label for our   button with the help of a text widget so i'm just  going to provide like upload and here one more   thing i wanted to explain you here is like in  this particular tutorial i'm going to upload an   image that we provide in our assets folder here  so currently we don't have an assets folder and   let's go ahead and create one so here i'm going  to create an assets folder so our assets folder   has been created and now i'm going to add an  image here so it's just sample image which   i have created for this tutorial and the  name is like test image and now if you have   gone through our previous tutorials you might  have already known what is the next step here   yes we need to add the assets here so if you  are having any query regarding this indentation   just make sure it is in the line of users  material design here so just follow it   and see it lies in the same position and also just  remove this and i'm going to provide assets slash   test image dot png and don't forget to  specify the format and everything as well   so if you are having multiple images you  may even just specify the folder here   and even that works but as i have only one image i  am trying to provide the complete path here so now   we have added something into our pubspec file  so we need to fetch those dependencies here   to make sure our code gets the assets which we  have added and now we are going to create a method   like upload image and this method will have two  parameters so one is title so the title for the   image and one more is so don't worry what the  file is like we need to import this dot dot io   so with the help of this file  we are going to provide the path   for our image and that particular image will be  uploaded so here we are going to create a variable   request and with the help of http which we  have added at the starting of the tutorial   in perspect so we are just making use of it  so here make sure you import this http which   you have specified there so import http this  is our package and also you can just specify   like as http you need not specify everything  every time so you can just make use of   http here and you can make use of the methods  available in that particular dependency so if   you are facing any queries in this particular  step do let me know in the comment section below   i will surely help you with it so now we are  trying to make use of multi-part request here and   also i will let you know what is multi-part  file we will be using the same in this tutorial   also so multi-part request and here the first  thing you hear you can see it is suggesting us   method and the second one is uri so the method we  are going to make use is post and url is i'm going   to provide so you're getting some error here right  so the argument type string can't be assigned here   to the parameter type uri yes it's showing us  a suggestion that you need to use uri here to   provide the url path here so uri dot pass and here  we are trying to provide the url inside this so   here i'm making use of imgur.com and you can just  go through that particular website and sign up for   it and you can also practice this particular  tutorial by making use of your authentication   that is client id over there you can use your  own api for which you want to upload the image   with the help of the post method here so  now with the help of this request here   you can add fields so here we can specify the  fields like key value pace which we use mostly   while we are passing some parameters in the  post method so here we can just pass the   title which we have provided here and equal to  i'm just providing some static values for now   so i'm just providing like dummy image and  here you can also customize your header section   and yes we require this for this particular  tutorial because we need to provide the client   id here so you need to make use of the headers  also here and also in our coming tutorials we   will be seeing how to upload multiple files so  we can just make use of files here but in this   particular tutorial we are making use of only one  file so we are not considering this option for now   that is files so just make use of  header and here i am going to provide authorization and here what is the header required for that  particular api you need to provide that particular   key name here and i just provided authorization as  an example and here i'm going to provide a client   id so that client id i have signed up and i have  got my own client id so i will be providing that   at last and i suggest you to sign up to this  particular website or else if you are having your   own api just make sure you add your own headers  and fields depending upon your requirement so   now we have provided the api and we have provided  the parameters for it and now let's try to fetch   the image and try to push it to this api  so we are going to create one more variable   picture and you can just provide any name here  and now by making use of http multi-part file dot   and here you can just make use of from bytes  from path from string depending upon your   requirement for now i'm making use of from bytes  for this particular tutorial and here is a field   so now let's provide the field to be image and  value so here to specify the value we need to   fetch the data and we need to process it so we  need to wait for a while and now make this method   as asynchronous so that we can add await here  and specify root bundle using which we need to   load the image which we have specified in assets  test image dot buffer dot as uint eight list   let's specify the file name here so again the file  name here i'm just trying to provide some static   file name i'm just providing the same name which  we are having like test image dot png so now we   need to add the multi part which we have specified  here we need to add the multipart to our request   here request dot files and here we need to add  our multi-part file that is picture and now we   need to fetch the response so for which we are  declaring a variable response so we need to wait   for a while to fetch our response here and with  the help of request we need to call send method   so that we will fetch the response and we will be  storing that response in this particular variable   now so now we need to process our response so we  need to add a variable like response data and here   you need to fetch the response dot stream  and here you need to convert that one to   so now we'll be making use of this particular  response data and create one more variable and   we can just provide it like result here so this is  a final output which we also try to print to the   screen and show the result so i'm just specifying  it as a result so string dot from character codes and you need to provide response data here and now finally you can just make use  of the print statement and try to print the response onto the console so here we are considering an image from the  assets folder we have added the image in our   assets folder and we have specified the same  in the pop spec file in the on press anonymous   function you need to specify the upload image here  and title you need to specify some title image and   file you need to specify file here so the actual  path is like assets slash test image dot png   make sure you have provided the exact path  here now it will only accept a file format here   provide the path inside it and now try to run  this code so first of all we will try to run this   code in android emulator so here our application  is now installed onto this android device and now   we can see the upload button here and just  try to make it to the center of the screen   so i'm just wrapping it with center and try to  reload it so here you can see our button is now   in the center of the screen and when you tap on  this button we will try to upload the image to   the particular api which we have specified  so i have added my secret key that is client   id in the header section and if you sign up in  that particular website you will fetch your own   client id and please make sure you add it before  trying this particular tutorial because if you   don't have your client id you can't upload the  image and now try to see the image once here   so this is the image which we are trying to upload  and now let's try to tap on the upload button and   see the response here so here you can see  we have successfully uploaded our image   and this is a response which we have got  and now try to copy this particular url   and open a browser and here try to paste this url  and just try to remove the slashes extra slashes and now try to run this and here you can see we  have got the image successfully uploaded from   our flutter application here and now  we will try to remove this particular   image so there is a api for deleting also for  deleting the image which you have uploaded and   for which you need to make use of this delete hash  here and from postman i am trying to provide this   hash and previously i have also tried this and it  was working fine method like delete and now try to   run this code and here you can see we  have got success and now again right   refresh this particular image now and see and  here you can see the image are requesting does   not exist so we have deleted this particular image  from the server and now let us try to make use of   the same tutorial and try to run in an iphone now  and here our application is now been successfully   installed on ios device and here you can see the  output is almost same and now let's try to run it   in our ios device and see the output whether this  works the same and when you tap on the upload   button and here also we have got the same response  like our image is now successfully uploaded and   now try to run this try to copy this url and here  you can observe the file name previously when we   have tried to upload the image from android also  we have got an url so in the ios also we have got   a url so this makes that the code works same  and here you can see we have got the same image   uploaded again to the server and now try to delete  the image again by making use of the postman here   so i'm just trying to provide the delete hash  every time and i'm trying to call this api and   we will try to make use integrate the delete  option also in our application as well by making   use of this particular api call in our coming  tutorials and make sure you save these values   by making use of a shared preference and here you  can see we have provided a title like dummy image   and that was been uploaded successfully to  our server and likewise you can make use of   these parameters and provide your own requirements  here and now just like we have checked previously   after deleting the image now let's try to refresh  the image again and here you can observe the image   you are requesting does not exist and yes we  have successfully uploaded an image from android   device and ios device as well and we have got the  same output and also we have cleared the image   and try to re-upload the image so i  hope this is a clear tutorial for you to   understand the concept of uploading the image from  flutter application so the code for this tutorial   i am providing in the description section  below and if you are having any queries in   the implementation do let me know in the comment  section below and for more interesting tutorials   like this do like share and subscribe to our  channel for more interesting content on flutter

Channel: amplifyabhi coding

Views: 32,268

Keywords: flutter upload image to rest api, flutter upload image multipart, flutter upload image from gallery, flutter upload image firebase, flutter image upload example, flutter file upload example, flutter upload image to firebase storage, flutter image upload to server, flutter image upload php, How to upload image in Flutter? - Stack Overflow, Uploading a File to a Server from Flutter Using a Multi-Part, Upload Image/Video in Flutter with Rest API, flutter way, flutter

Id: bZCn5eTGcBc

Length: 19min 30sec (1170 seconds)

Published: Wed Sep 01 2021