Flutter : Upload file to your server | Post an image through api | amplifyabhi

in this Vlog we would like to deal with the  implementation of flutter file upload so basically   in our previous tutorial we have seen with the  implementation of file download in your flutter   application where we have tried to download a  sample file so that is a text document file which   we have tried to download in our previous tutorial  with the help of a Dio library and now in this   part of the tutorial let's try to upload the file  and now this time we will try to upload an image   file and we will be fetching this particular image  file from your device itself and also will try to   manage the permissions as well so in the previous  tutorial I have said you right to make use of the   permissions to download the file onto your flutter  application onto your device so in this part of   the tutorial let's try to implement the flutter  file upload that is image upload to the server and   we are also using a real-time API here we are not  using any dummy API to show you the status code   or what is the response we are getting but this  time we are trying to see a real API where we   are trying to upload an image and I will also  show you the image after it has been uploaded   so here we are making use of a third party tool  in the third party tool will provide us an API   and whenever you are trying to implement this  particular tutorial try to replace the API with   your own API so that the tutorials work in  a similar way for you as well so there is no   change in the logic only you can try to change  the key name which were provided in your API so   now let's get started with this particular  tutorial and try to see the implementation foreign we have already added the required library that is   do library to our flutter project  so we need not add anything new now   let's try to use the same code which we were  using for our previous tutorials as well so if   you have not gone through our previous tutorial on  flutter download that is downloading a file using   Dio Library I suggest you to please go through  it before getting started with this particular   tutorial so that it will be very much helpful  for you to understand this particular concept so   now the very first thing we'll start with here is  like instead of download let's try to provide here   upload so instead of download let's try to provide  upload but one thing do we have any upload option   here let's try to see so we don't have any upload  API request here then how we can upload our image   or whatever the file it might be yes generally  how you will try to create some resource in your   server we'll be making use of a post API request  right so here in this part of this tutorial we   have discussed in detail like what is a post API  request and how do we implement it in our flutter   application so yes in this part of the tutorial  also for uploading an image we are going to make   use of a post API request only so there is no  separate API request called upload for download   it is a separate API request is there but for  uploading a file we are making use of post itself   okay so here let us provide the API so what is  the API here the API which we are going to use   is imbb so here I would like to show you the  website for it so this is the imgb this is a   third party website which we are going to use for  this particular tutorial and I also suggest you to   go through their terms of services before using  this particular service and also make sure you   follow these particular rules and try to follow  them before making use of their services so just   go through this particular terms and services and  if you like it then start using this particular   service So currently I have just created the  account so I don't have any images or albums here   I don't have any followers or I'm not following  anyone so this is a brand new account so just for   tutorial purpose I have created this particular  account so creation of an account account is very   simple and if you are having any queries just do  let me know in the comment section below and now   let's try to upload our image to this particular  server here and in the about section so when you   tap on about here you are having these particular  options in the drop down and tap on the API here   the key here so with the help of this  particular key you need to upload your data   yes this key plays a very important role  and without this particular key here you   cannot upload your data to this particular  website and here is the upload API here   so upload API and upload key here these two are  the primary things here and if you want to add   a new key you can just tap on this particular  button and you can delete it respectively okay   so let's try to see the parameters now what are  the required parameters as I have said key is   the required parameter and image of course this  is what we are going to upload here and yes only   the images we can upload using this particular  service so I have said we are trying to upload   an image to the server so in the previous tutorial  we have clearly seen how we can pick an image from   your device here if you are having any queries in  picking up the image I suggest you to go through   this particular tutorial so that you will get a  very good knowledge on how you can pick an image   from your device and provide that image over here  and name again it's an optional thing if you have   provided the name it's well and good or else it  will consider the name based upon the file path   you have provided an expiration so here expiration  is like the time duration till which you want the   file to be present on their servers and again  this is also an optional thing if you want you   can just specify them unless you can just skip  it and this is how the API response will be so   whenever you try to provide whenever you try to  make use of this particular API call you will be   getting a response which look similar to this one  okay so this is so simple and easy to understand   API implementation and if you are still having any  queries in understanding any of these things just   let me know or just follow this tutorial till the  end don't skip any part of the tutorial to avoid   any confusion so now let's get started so the  first thing here is like copy this particular API   here and try to paste it over here and yes we have  got the API then what about the data in the post   API request we have data right and in data how  we should send our image key and also the name if   required so how we will be sending all these three  things here have this specified anything here   so if you clearly observe here in the name  here the name of the file this is automatically   detected if uploading a file with post and  multi-part by form data so they have specified   like whenever you are trying to make use of a post  or multi-part multi-part or form data so generally   I have explained you regarding the multi-part  data uploading the data using multi-part here   in this particular block and whenever we are  trying to upload a data here we will make use   of this particular multi-part scenario where so  the data is being divided into different parts   and then it is been uploaded rather than uploading  the data completely at once okay so now let's try   to make use of the form data here and with the  help of the form data we will try to provide our   image key name our key and also the name here so  let us specify form data here here you can see we   have got form data Dot from map and within the  map we need to provide the key value Pace here   so the first thing we are going  to pass is like a key here   and let us try to specify the key and the  second thing we are going to pass is image here   and let's try to provide the key here and don't  worry about the order we are trying to provide   here you can just provide image first key next  and all these things but I'm just trying to go   with the proper flow so I am providing in this  particular way and again name is an optional field   if you provide it's well and good and if you don't  provide also there is no error so this particular   image from where we are getting so let's specify  a weight and we have discussed right multi path   so let's try to make use of it multi-part file  Dot from file and here we need to specify the   file path and also the file name here for now let  us try to specify file name to be file name only   and later we'll try to provide these two fields  and let's try to remove this particular line   directory here because this one we have used in  our previous tutorial where we try to download a   text file so here this is our form data and try to  add this over here so the data here is nothing but   the form data which we are trying to send that is  which we are trying to post with the help of our   API here and now let us try to fetch the Onsen  progress like how much of data is been sent and   also you can make use of on receive progress in  terms of whenever you are downloading a file so   in our previous tutorial try to implement on  receive progress and if you are having any   queries just let me know in the comment section  below so here let's try to specify Onsen progress   so here we will be getting two parameters  like one is sent here and other is total   so how much is the total size of the particular  file and how much is being sent so based on these   two things you can just calculate and provide a  UI for the user so that he can understand like how   much data is been sent and how much is remaining  so here I'm just trying to print the sent and   total here and also let's try to enclose them  into a single code here and provide a semicolon   so here I'm just trying to print them using a  print statement but in real time you can just   make use of it according to your requirement  so now let's get back and what is file path   and what is file name here and for this again  we will try to refer our previous tutorial here   where we have made use of a file picker and  let's try to make use of a file picker here   file picker result specify an object like  result await file picker dot platform Dot   what we are having option here pick files okay  so we are trying to pick a file right and in our   previous tutorial I have also clearly explained  you how to provide the restrictions over here so   if you have not covered that particular tutorial  in this way we can just provide the restrictions   like specify the type here so just go through that  particular tutorial and try to find out how we   can just restrict the data according to the type  which we have required so let's try to validate   the result and if result not equal to null  and inside which we need to process the result   accordingly so let's specify file here and we are  trying to fetch the result into this particular   file result dot files dot single dot path and  if this is empty then let's try to specify an   empty double quotes here so that we don't get any  error if it is null and also try to enclose this   within the file here and provide a semicolon here  and now let's try to fetch and now let's try to   fetch file name here so how we'll be getting a  file name now so consider the file dot path Dot   and split here so in the path here it will be  separated by this forward slash so let us try   to split with the help of this particular forward  slash and try to fetch the last one here so the   last one will be having the file name so in  this way we are trying to fetch the file name   and here you can see this is what the file name  which we are going to use here and yes form data   and the API call should also be inside the if  condition here so I'm just trying to remove the   closing bracket here and trying to provide it  over here and also if there is if condition we   also need to provide an else condition such that  if the condition which we have specified that is   if result is double equal to null then let's  try to handle that particular scenario as well   result is null and again these are all the basic  statements which I am providing here just replace   it with your required functionality okay so yes  we have got the file name here and here we need   to have the file path now so file path is nothing  but you can just create a variable like string   file path equal to file Dot path here okay  and you can just make use of it over here or you can just directly add file dot path  over here anything you can do here and now   we have specified almost all the things and here  let's try to specify some name finally we need   to specify the key over here so I'm providing my  key here and now let's try to run this particular   code and see the output once whether this works  properly or not and here we have got the output   and still we are having download file because  we are making use of our previous tutorial code   and let's try to change it to upload file  and re-run it and now let's try to tap on   upload file and here as we have installed the  application it is not asking us permission again   but it will ask you the permission if you are  trying to make use of it for the first time so I   will try to remove the permission and try to show  you again here so the files in media permission is   allowed here so I am selecting don't allow and  now try to open our application here and tap   on download file here so here you can see it is  asking us the permission to access the photo and   media on our device so whenever you tap on hello  here it is showing the images which are present in   your device so let's tap on this particular image  and now try to observe the output here here you   can see we have got one image now and this is what  the image chest we have tried to set so when you   try to upload this particular image here clearly  you can see like onsent progress so this is what   the Onsen progress which we have tried to print  over here and also this is a response now so the   ID for the image which we have uploaded and here  you can see we have got the title to be a here   and whenever you tap on this particular here  URL so this is a display URL we were being   diverted to the web page that is the page  where our image is being stored so this is   a path and it is showing us and also you can  clearly see that the name is a bit different   okay the name which we have provided here  is being considered and not the name which   we have provided specifically here just will  be skipping this particular name and try to   rerun this particular code and check whether  this works properly or not so yes even if we   don't provide the name as we have seen like it's  an optional parameter only so we have tried to   upload this multiple times let us try to see  whether it is been uploaded multiple times   no it is only uploaded once only so here you  can see it is not uploading the duplicate   images but it is maintaining the same image  let's try to delete it and try to re-upload it   so let's try to upload here itself and try to see   let's try to refresh the view and again we have  got one image now so tap on this particular image   and this time we have got image 2022 and this is  what the name which we are having in our device   okay so I think this is very much clear for  you and I hope you understood this particular   tutorial and if still you are having any queries  just let me know in the comment section below   and the code for this tutorial is provided in  the description section below and if you like   this tutorial do like share and subscribe to our  channel for more interesting content on flutter

Channel: amplifyabhi coding

Views: 21,966

Keywords:

Id: 5cKmqkO--oo

Length: 19min 1sec (1141 seconds)

Published: Tue Nov 08 2022