How to Upload Flutter PDF Files with a Single Click | PDF | file upload | dio | amplifyabhi

in this blog we are going to see the process of  uploading a PDF file to the server using a rest   API so in our previous tutorials We have dealt  with the do library implementation for API request   so here these are the previous tutorials We have  dealt with the help of do library in our flutter   application and in this particular log we try to  see the upload of an image to the server but after   this particular Vlog I am continuously getting  request regarding how to upload a PDF file or   a document file to the server so in this part of  the tutorial I am going to show you how to upload   a PDF file to your server using Dio Library it  is very much similar to how we upload an image   but few people are getting confused like how  to pick the file and how to upload it to the   server so in this part of this tutorial I will  try to show you clearly the process of how to   upload a PDF file stay tuned till the end of this  particular tutorial so that you will get a very   good knowledge on how to upload a PDF file and of  course in our next tutorial I will also show you   how to download the PDF file and view in your  flutter application so while let's get started   with this particular tutorial now so here I have  provided the basic code here like a stateless   widget inside which I have added a material app  and scaffold and inside which I have specified a   column and you can see a text button also I have  added so in my application currently I don't have   anything just a text button in the center of the  screen so with the help of the center widget I   have made the button to be appeared in the center  of the screen the label of the button I have just   specified like upload PDF and in the on press  currently I have not specified anything so now   let's try to specify a method like upload PDF  and now we are going to create this particular   method now so upload PDF is an asynchronous  method because here we are making use of a   multi-part request to upload the PDF file first  of all we will pick the file using a file picker   when you hover your mouse pointer over upload  PDF it is asking you to create a method because   upload PDF method is not there in your code  till now so when you tap on create method here   so now you have got void upload PDF but instead  of void we need to make use of future here and   this is of a type asynchronous so now let's start  specifying our Dio Library here so I'm going to   create an object for to so that we can make use of  do library and the first thing as I have said we   need to make use of a file ticker here file picker  and here let's try to specify it like result   away file picker so in our previous tutorials also  I have clearly explained you how to configure the   file picker I am providing the link here just  go through it here I have explained you how to   configure a file because such that you are you  will be only able to find only the particular   files which you require for example now we require  PDF so you can just specify PDF in the file picker   and only the PDF files will be visible for you  when you try to open your file picker but in this   part of the tutorial I am not going to restrict  here so do visit this particular tutorial to know   how to add restrictions to your file picker so  file picker dot platform dot pick files so now   let us try to see whether the result is not null  so that we can proceed further so once we got a   confirmation like result is not null we need  to get the file path now so file equal to file result Dot files dot single dot path so  we have specified result.files.single.path   here and so that we can get the file name  now so that we can get the exact file path   now so by making use of this particular  file path we need to create a file name   okay so make use of the file here and again  creating of the file name is depending upon   your requirement again I am just trying to provide  it like in a default way so you may follow this   particular path or you may try to implement your  own requirements sometimes you will also try to   get the file name from the user or based on the  current time or whatever the scenario it might be   so just try to customize this particular file name  according to your requirement or else you can just   follow this particular path also and we have got  file name and now let us also store the file path   in a variable so that it will be easy for us to  pass to the API request that's all even in the   API request you can directly specify file dot path  but I have just try to create these two variables   so that it will be easy for us at the time of  making an API call so now let's get started with   our form data using which we'll try to upload the  file now so with the help of file because we have   got the file path right so we need to provide this  particular file part to our multi-part request so   that it will try to push the file to our server  so form data equal to from map and here we need to   specify the API key so I am trying to make use of  a real-time API so there is no any dummy API I am   using in this particular tutorial in a real time  API there will be an API key to Makers authorized   to use their services so here we need to specify  the API key now so here I am going to specify my   API key and whenever you are trying to implement  this tutorial on your side I suggest you to   provide your API key over here by just replacing  it over here and the second parameter here we need   to specify is file itself we cannot just directly  specify the file here we need to add a weight and   with the help of the multi-part file Dot from  file here so in our previous tutorials we have   discussed these things also like from string  from bytes so just please visit the previous   tutorial because in this particular tutorial my  main aim is to specify how to upload the PDF so   here it is asking us to specify file path so let's  try to make it like file path instead of path   and yes so we have specified file path  and the second parameter is file name   so I think you understood like why I have created  variables earlier so that it would be easy for   us to specify it over here and now it's time to  fetch the response now let's try to perform the   API call so for performing API call I am trying  to specify first of all variable response here and   we need to have dot post so we are trying to  post some data right so and that's why we are   making use of the post API request here we need  to specify the API so this is the API which I   have said right I am trying to use a real-time  API to provide you a better understanding like   how the thing works in real time I am not trying  to provide any dummy API calls here with any dummy   data so this is a real-time API and I am trying to  use a real PDF file itself and here comes the data   so what is the data here so this form data is our  data and I have specified it over here and one   more thing here whenever we are trying to upload  a file to a server we need to track its progress   like how much of the file is being uploaded  and how much is still pending so that we can   show user a status bar like 20 of your file is  being uploaded and remaining amount of time is   like two minutes for example so that the user  will also have an idea like what is happening   behind and without any progress bar like kind of  thing uploading of a file is very much difficult   and user may not understand so here we'll be  getting two parameters here send and one more   thing is total and based on this you can do your  own calculations like how much you send and how   much total is remaining so I'm not going to create  the dialogues and all those things because you   can handle those things so I'm just trying to  print them and I will show you in the log even so we have almost reached to the  end of the tutorial so yes one   small correction here here we are not closing  this bracket and on progress is also part of   to post here so make sure you specify this within  the post here itself so the first parameter is a   API second parameter is a data and the third one  is Onsen progress so you will be receiving Cent   and total information over here and what if  the result is not equal to null so we need to   handle the else condition as well right so if  the result is null I am just going to specify   result is null okay and also here I am  going to print response response Dot   what options we are having here to string okay so  now let's try to run this particular code and try   to see and before trying to implement and before  trying to see it in our application I will be   showing you in the postman as well so this is our  API and here I have added a sample file and I have   even tested it before this particular tutorial  and now let's try to test it again so here I am   trying to send it and you can see the status code  like 200 and also we have got all the information and the file is also been uploaded successfully  and these are my remaining credits so here let's   try to see in our application now so this is the  output of the button so this is the output here   we have got like only a button is specified and  when we tap on upload PDF here you can see my file   picker is now opened and I can only see sample PDF  file I have not added any restriction here in my   emulator I just only have this particular file for  now so let's try to tap on this particular file   and then quickly we will try to observe the logs  as well so now let's try to observe the logs here we have got an error here why we have  got an error because I have not added the   API key here so I will try to add the API  key and we'll try to rerun this particular   code again so here I have added my API key and  now let's try to see how this thing works now and this is what the status still our file  is being uploaded and it is not uploaded yet   so let us try to see what we'll  get by the end of the file upload   so here you can see we can clearly see our file  is now uploaded and once the file is uploaded   we have got the response and the response States  like status is 200 and my remaining credits are   434 so previously when I tried in Postman it's  like 467 credits and now it's like 434 credits   so this is how we can just upload a PDF file  in our flutter application here and the code   for this particular tutorial I am providing  in the description section below and if you   are having any queries do let me know in the  comment section below and also try to let me   know in the comment section what are the other  tutorials you are interested to learn in flutter   so that I can try to make a tutorial on those  topics as well so if you like this tutorial do   like share and subscribe to our channel  for more interesting content on flutter

Channel: amplifyabhi coding

Views: 7,628

Keywords:

Id: g834QMAqP0s

Length: 13min 56sec (836 seconds)

Published: Wed Jan 11 2023