FastAPI Handle Form Data & Upload Files

in this video i'm going to be showing you guys how to use a form and upload files using fast api server let's get this video started this is where we left off pretty much in the previous video so as you guys can see i usually uh what i what we did in the previous video was to use the ginger to templates and write and create some basic directories and write a home.html so we got our data from username and we dynamically loaded our html file and that's what you guys saw in the previous video all right so we're gonna be um using the same steps from there and continuing on and i'll show you guys how to create a form and use that form to create a post request to our uh uh to our server and we'll be uh playing with some data there all right so first things first what we need is to create a form itself so in the previous video i already showed you guys how to render this home.html so guessing you guys are from there let's continue this so what you're going to do is after this after the h2 tag we're going to be using the form create a form simple form here and as usual you will have a lot of different data within the form the first data that we're going to we're going to be having is to actually take an input so i'll take an input and i'll say the type is going to be a text and the name of this is going to be basically let's call this as uh uh probably i'll try to call this the let me call this as basically i don't know i will probably call this as uh assignment number or something like that assignment okay we'll call this assignment basically what we need to do is that what we're trying to construct here is that you can trace constructing a form where you're going to take the title of the assignment and you're going to submit this form and you're going to render the the data using the fast api server in the back end so this is pretty much it that's it so we have the input we are saying that it's going to be a text and the name of the input is going to be called as an assignment and we'll have a submit button here basically we'll say input type is going to be submit and uh so what will happen is on submit we need to say what will happen right so we'll say on submit um we would say the method is going to be a post method and on submitted say all the action is going to be we need to submit the form data to an endpoint and i'll try to call this endpoint that's probably uh submit form so we now have to go ahead and create our sub inform endpoint all right so let's go and first of all make minor changes to our main.pipe and in the main.pi as you can see that we are able to we are able to render only when you go to home slash username so that's the very important step right so when only when you go to home slash username this file is going to be rendered so that's the first step now after that we are now going to be making use of another external library or we can actually call it as an extended library or fast api which is called as python multipart so it's important that we first install that we'll say python multi-part i guess it's already installed in my system yeah so it's already installed into my virtual environment so you guys should also do that only when you have the python multipart installed within your python and virtual environment you'll be able to create classes for files and forms so once you've done this we'll go back to our fast api which is going to be our base layer and you will try to import your file and you will upload file and you also try to upload import your form so these are three important things that you obviously definitely need for this video uh all right so once you're done with that we now have to create an endpoint for this right so we'll quickly go and create endpoint and this is going to be a post endpoint so make sure to create a supposed endpoint and you'll say that submit form and it's going to be a post endpoint so pretty much that's it i don't want anything else and inside this method i'm going to be creating or i'm going to be creating creating a method called as handle form all right so this is pretty much it so in the handle form i'm going to be taking my first variable which is going to be the assignment right so make sure your user your uh your variable name within your handle here and the name of this uh text file or this in this example our input text is actually same you cannot have a different file or different name uh the server will not be able to understand what is coming from this client so we have the assignment created and you're going to be calling it as a string but also you need to understand that this is going to be a form data so when you automatically say it's a form data make sure it's actually going to be a default value so when you say it's a form data the fast api is now able to understand that there is some form data coming in and in this form data i need to take the variable called as assignment and assign it to this variable here so that's what the fast api is doing in the background we didn't actually now go and fetch the form data from that find what we want and things like that is not even required the fast step will automatically get the form data see what are the variables that are available as part of the form data and assign the variable to whatever matching variable we are giving so in this example it's going to be assignment so make sure this and this are same all right so now we have the form assignment here you just now try to print it and we can just we can see for ourselves that is it printing or not all right make sure it's inside i'm making it okay all right once we are inside they should be able to print it now all right so one more important thing here uh so far what we have done is we have created synchronous methods meaning that i've posted data i have written home and gone to home and things like that all of these have been synchronous data but for the form to work or for these things to this thing to work the fast api wants it to be an asynchronous method what is the use of an asynchronous method when you give it as a synchronous method we are saying that there is going to be some response in the background or in the future so wait for that in the client side that's the meaning of the asynchronous method so we need to have our form methods or whatever methods we're trying uh within the form method to always be in asynchronous method only then you will be able to render it or able to process it and then the ui can also refresh or render things that we want to render this is basically going to be the structure of our form now and when you now try to go and quickly run the ubicon all right so this is fired up now all right so this is going to be the url so it's fired up but as i told you we need to be in this space so i need to say it's my name bharat watch and mainly then this html or this home.html is going to be rendered awesome so it's rendered right here for me now i need to try or test if my assignment is actually getting submitted so i'll say i send my name as uh probably i'll call it as fast api test assignment uh one this is gonna be my scene my name let's see if it's getting printed right here all the awesome right so it does get printed right here and as you guys can see hopefully hopefully you guys can see it here uh it says that fast assignment fast api test assignment one so we are now able to pass data from our form to our fast api method which is going to be our handler here now this is cool right okay this is cool you're saying me you're telling me that okay i'm able to now pass data and you can similarly pass any type of data that you want um but next step is how do we upload a text file now that's going to be a little bit of a tricky step here but with fast api it's very very simple again and you're going to be using the same form data right here and we now have to upload a text file as a response for our assignment right so let's go ahead and do that right here say input and you see the type is going to be a file and i'm going to be naming it as an assignment file or assignment file so this is going to be the name of my file that you want to upload it to as you guys know we need to go ahead and create a variable for that right here again say the first one is going to be an assignment but the second one is also part of the form but i'm telling you that it's not going to be just a simple form element rather than it's going to be a file element so how do you do that you just say upload file you're saying it's off the type upload file and i'm going to be saying just create it as a part or an object of the file itself so what are the use of doing this now there's a two way to create you can either say assignment file as bytes or you can say it has an upload file when you specify the type as upload file it creates a spooled memory in the background which is much more faster faster to read and also on top of that you can even able to save it into a fast api server so let's say that you want to save this assignment into a local memory you can do that much more easily with respect to the upload file compared to the bytes user so what you'll do with bytes is you'll read the bytes you'll write it to a file and then you'll convert it to a text file which is much more difficult but with respect to an upload file which is actually part of the python multipath that we just installed with pip it is automatically taking care of creating a spooled memory which will actually hold some memory for our file and if you want to directly write on it or read on it you can directly do that and that's the much uh much faster way of doing it so that's what i'm also going to be doing here so we're seeing assignment file which is going to be the same name as this and once you get the assignment file now you can like i told you can read on it you can do anything on it right so let's try to read this assignment file i'll just say content of assignment or assignment content and what i'm going to be doing now is going to be doing an await on it meaning i'm going to be doing a way to complete reading it and then assign it to my content assignment so i'll just say curved assignment file dot read-off so you can say how many uh number of data you want to read you can see the size that you want to read it from by default it will read the entire file and now it's time to print this content assignment so whatever text is going to be inside it it's going to be printed let's say it's of some other type right you want to check what is the type of it you can still do that by just doing you can find the type of assignment file by checking for a lot of different things like file name content type what is the maximum size of this file and all of that thing is very very very easy with it so let's for example now try to get the file name so whatever the user is uploading let's try to get the file name and you'll see what is the data from this now close your server and restart it again and we will see what happens all right so once you come to your home dot slash paragraph now you can see that for yourself uh it's asking for username but also it's saying that you need to upload a file right so first let's let's fill this up right i'll try it i'll call it test assignment one i'll choose a file i have a sample txt file in my uh text or i have it in my my desktop so i'll quickly do that as well i'll just open it up and i'll try to submit it when i say submitted it's saying that expected upload file received class str type is value error so it's saying that it's it was expecting an upload file but it received a text or it received a string instead so what i need to do is that i need to save all right so one important thing that we're forgetting here is to have an encryption type so when encryption type is already present only then we'll be able to or this main will be able to understand what type of data is coming through and form data is very very important for files so i really forgot about that and that's why it has actually throwing this error now go and uh try to redo that again we'll go back refresh it we'll say assignment 1 choose file and desktop i'll say text and i'll try to submit it and now you can see for yourself that is actually able to pick this up and submit it so why exactly this is happening i think this is happening because i created mine as i think i created as an rtx file meaning rtf file which is a rich rich text file that comes as part of my uh probably my thing like my test my mac and that's the issue that's the reason it's throwing this let's let's remove this job this should be fine right all right so this should be fine i'll save this up again i'll retry it again so far as we can see for ourselves um choose file go to assignment text one and submit it and now you can see for yourself that it's able to submit it to saying that uh the fast api assessment one is the name and also the name of the file it said it's a text file and also what is the data present inside it which is what we wanted and it's very very simple compared to all the available python related frameworks server frameworks and comparatively easy to create as well you know able to upload or create a hook for your form you know your file as well upload files you can even do multiple file uploads by passing it as multiple here and say multiple file approach you just have to now consider this as a list of files you will say list of this is going to be list of files just make sure to upload it from from typing import and that will automatically pick this up here so you will now be able to upload multiple files so it's actually throwing an error saying that list does not have a type of file name so i think you get the idea right so you will be able to do it with list of files as well the same way once you get the list you light right through it and do things like that on and do do actions on top of it so very very simple when when you actually understood about how this works and one important thing is again not forget the encryption type one if you give the encryption type the pi is able to pick it up or the your main pi which is going to be your server file is going is able to pick it up so that's pretty much what i want to share with you guys uh hopefully this video is informative if you found this video informative make sure to drop a like and subscribe let me meet you guys in the next video i've got few other things to talk as well about authorization and also talk about middleware and how you can change your own middleware and probably a few other templates that i found out which is very very cool for fast api all of those videos are coming up in the next few days make sure to stay tuned for that i will see you guys there underline spiral piece have a super awesome day

Channel: CoOoDE

Views: 33,302

Keywords: coder monk, programmer, software development tutorials, coding tutorials

Id: Ofesfy686jY

Length: 13min 44sec (824 seconds)

Published: Sun Apr 25 2021