💾 File Upload with a .NET 6 Web API & Blazor WebAssembly

hello my dear friends welcome back to the channel i am patrick god and thank you so much for watching already now today we are going to have a look at the file upload with blazerwebassembly and the.net 6 web api now there are tutorials on my channel and in my courses where we already upload images and for that we used base64 strings meaning you would select one or more image files from your hard disk and then we would turn them into base64 strings and store them in a database table then but today this is different now you can choose any file you want and upload it to the server and then on the server it will be stored as a file now the idea behind all that i got that actually from the official microsoft documentations you can also have a look there but here in this tutorial i removed lots of stuff i'm also talking about that in the tutorial then itself but maybe you skipped this intro here and that's not that nice well you won't see me here now but still i don't think this is really nice anyways what we are going to do is we will remove the exception handling and the logging i know important stuff for production at least but for learning purposes maybe you won't really need that so i removed it changed it a little bit and now if you really just want to know how to upload a file and store it on the server then this tutorial is for you and i also want to say that this is actually a two-part series times are tough currently because we're moving in august and if you are a loyal subscriber you may already know that we moved a couple of times in the last 18 months or so but now i really hope that this is the last time for the next couple of years and don't have that much time actually uh we or ice i split this here now to this tutorial regarding file upload and next week then i will do my best to give you the file download tutorial because this is also well not really complicated but well you have to do some more stuff than just uploading it and then grab a link and download the file again you would have to well actually store some information the database and so on but this is then stuff for the next week so for today file uploads with a blazer webassembly and a.net 6 wave api alright and long story short if you like this tutorial and learn something you know the drill guys i would really appreciate it if you click the like button and subscribe to my channel don't forget the bell icon it does make a difference thank you so much also if you want to get more dotnet stuff in your inbox and upcoming online courses early access to these courses like the dotnet web developer bootcamp then the newsletter is definitely something for you so please check this thing out and the last thing thank you so much for all the coffees and teas you see i'm well i'm a guy who forgets to bring back the cups this is tea and coffee and i've got this great cup here do you know where this is from if you know where this cup is from then please in the in the comment section please write it down there and then we can become new friends maybe because i really like the game where this cup is coming from all right and with that enjoy the file upload tutorial with blazerwebassemblyand.net 6. all right now first again there is an official documentation here in the microsoft docs where you can see how blazer file uploads actually work you can see it here player stuff right and there you can find the the file upload and also the file downloads but more about that later now here you see that we've got this uh this function here for instance and also this component and we will use parts of that but i removed a lot of it because here you see lots of logging and also exception management right and i know i know i know in production you should really use that but if you are here to just learn the the fastest way to upload files with a blazer web assembly and a web api then please keep watching this is the video for you but again for production purposes maybe you should also add logging and exception handling and so on so this just as a side note so now let's switch to visual studio and here we create a new project right so the recent project templates say we've got a blazer web assembly app let's do that we call this now blazer file upload i guess that's that's a good name click next we use dot net 6 and asp.net core hosted please because we want to upload it to a server then later on well here we are using uh just the local machine for that but the way would be the same then if you deploy this to a server so a please asp.net core hosted to get also the web api so let's create this there we are all right we've got our why see it here the client project the server project and the shared project and let's actually just start it so we can see what we've already got and then we will change our default application here now in a sec i hope the application starts there it is on my other screen and now what i want to do really simple is on this index page here on the home page we add the input file control and then also some code of course some logic to do something with these files so back to visual studio and open the pages and here's our index let's just remove almost everything maybe uh yeah the page title can be apple upload files and the same for the header here all right and now let's first simply add the input file control that's simply called input file we give this thing already a function meaning as soon as something changes here as soon as the user selects one or multiple files then we call a certain function and of course we will write this function in a minute so on input file file jesus file change for instance and let's also add the multiple attribute here so this means that user can choose more than just one file and now let's add the code block already and in here now we add our private async task on input file change and this gets an argument input file change event arcs that's the one this is our event and this is now the function now let's see how this looks already maybe we can just restart the application and then switch here all right upload files no file chosen now we can choose some files and for instance we choose one file or we can of course also choose more than just one file nothing is happening here of course because we haven't implemented anything now now regarding the logic of this function here now on input file change what you want to do is we wanna well first we define at least they suggest that and recommend that in the documentations we want to define a maximum file size and the maximum of the allowed files the user can select all right so for that let's just add this here maybe so we've got a private end for max allowed files and in the docs they say let's use three but in my case why not the max value of the integer type and the same for the the size so let's use long here so long max file size and again you can do something like uh 1024 times and then whatever you to have here as maximum value for the kilobytes megabytes whatever or you just use long max value for learning purposes only please right okay and with that now we can use that in our our functions or in our single function here on input file a change and the first thing we get is we want to create a content and this is a form data count in essence use the using statement here bar content new multi-part form data content right and this form data is then sent to the controller to the web api but first we have to fill in this content so set something in there and this will be our file and now we use the uh the event here of the on input file change to get every single file the user has selected and for that again we use a for each so for each file here in our collection the collection now is events and then gets multiple files and then here max allowed file so if you really want to use only three files for instance then you have to set this value there and now with this file the first thing we want to do is we create a new stream content so the file content here is the new stream content and to get that we open a read stream with the maximum file size so you see of course max value of long is maybe a bit too much here but it works for again this tutorial after that we want to set the content type of the file so file content headers and our content type is new media type header value let's use a new namespace here all right and for that now we say file content type okay after that we want to add the the file to a list because we want to do something with this list and this list actually only consists of the file names and when we get this list what you want to do then is we want to display the uploaded files here in the html in essence on the page right so the user then gets a little bit of feedback so that he or she knows that the file was actually uploaded so first let's add this new list so private list of strings simple as that call this file names and this is simply a new list of file names of course and now down here we just say file names get some room here file names add file name all right and then we set our content and for that we say content add and then here the actual content is our file content we can give this thing a name and as they say in docs let's just use something like files almost that's all right and now down here we also again set the file name with file dot name and only one colon like that all right and we would use this then to actually display the the file here in the html and also after setting this we would make a call to the web api where we really want to save this file then and upload it to the server but first let's change the html real quick so in here we want to display the files again so with if and then finance count first we check if there are any files at all and if there are we just say let's add an unordered list and again for each file name here in our file names collection we add a list item and in here first we just say this is our file all right so this should be it for now and now let's just see what is happening when we run this yes you want to rebuild and apply the changes there we are i hope select everything and these are now all files all right so we've got this at least and now the next step really already is uploading the actual file now the first thing we need here for uploading the file is not already the controller first we need another class another model and in the docs they call this upload results maybe you can have a quick look here in the documentations where is it there it is so you see here upload result this is the class and maybe we can find it where is it there it is right so here they say okay they have a flag for is this file already uploaded or not and then we've got a file name a stored file name and this is interesting for us and an error code so what we will use is only these two here again exception handling and so on please do that in production but here for this hopefully quick tutorial we only need these two because the idea behind all that is that we've got the original file name and we've got a stored file name and what microsoft wants here to do is to make this a bit more secure we will create a random string in essence for the stored file name so with the original file name we can't do any malicious stuff like overwriting overwriting for instance a file that already exists so let's just use this approach as well and later then with the file downloads can already tell you that to to be able to to get the real file we have to store this information in a database but this is done in the next part of this little series here so first just the upper result model with the file name and the stored file name so back to visual studio there we are we create a new model here a new class we call this simply upload result as well it is a public class and in here now we've got first our file name and then also the stored file name all right and with that then we can create the controller so in our solution explorer right click the controllers folder add new controllers this time and we create an empty api controller right so no generated code whatsoever just an empty controller and let's just call this our file controller all right in the first thing here we need is the constructor well why don't we need why do we need the constructor in essence just to get the current environment because with the environment we get the content root path and then we know where to store the actual file so first ctor this is our file controller constructor in here now we want the i web host environment call this nth and we create and assign the field and also add the underscore here because this is a private read-only variable and i like to do that i know i can configure visual studio for that but i didn't so please bear with me here and the next thing now is already our controller method it will be a post method so this is not http get this is http post and it is a public async task action results returning a list of upload results and of course we need the namespace here and let's call that upload file with a list of i form files and we call this files see that don't this is the content the form file we will use and the clients all right now when we got that first our list of upload results because this is what we want to return call that upload results your list of upload results this works and now for each file you want to do something so var files in file and files file and files like that first the upload results again a new upload result here all right and now after that again i am using this from the documentations they say we need a trusted file name for file storage this is a great name trusted file name for file storage all right and now we also got an untrusted file name and this is now the original filename in essence so we could also call this original file name but they don't want to use this name to store it so in our upload result now we set the file name to untrusted file name and after that we also need a trusted file name for display so what we want to do here is just encode the html so trusted file name for display is web utility we need the namespace here and then simply html and code and here we say untrusted file name okay now for the trusted file name for file storage we just say path get random file name isn't that a great function what does it say returns a random folder name or file name nice so this is what we can use and now the path now this is important var path this is the path where we will store the file you can do that with path combine and this is almost correct we've got environment current directory okay we could also use environment but let's just use it like that we've got our end here and then the content root path if you want check if this also works with the uh with the environment and content root path it is and after that we want to use a specific folder let's call that uploads for instance and then we choose the trusted file name for storage and regarding this this folder name here uploads make sure that this folder exists otherwise it won't work so in my case that's the project c development laser file upload bazel up file upload and then the server directory and in here we already create this folder uploads it is all right so this is really important and when you've got that then this will also work and after that we will use a file stream so await using file stream called fs for file stream new with the path and the file mode create because we want to store a new file and what we can do then is we simply use copy to async for or with the file stream here and the actual file so this thing right so with that we stored the file now and in the uh upload result now what you want to return we say the stored file name is the trusted file name for file storage and then we can already add this to our object we want to return to the upload results so simply add upload result and down here now we return okay and then upload results all right and by seeing this i'm not sure why we actually implemented or added the file name for display but still this should be it i hope so let's let's just recap this real quick we've got our controller here we're using the i web host environment to get the content root path all right but first when we send the form file to this upload file function we first create our return object and then for each file we got here again we create the return or part of the one return object here for the complete list then we also have a trusted finder for file storage so this is just a random file name that is then secure and this is then used to store the actual file you also won't see the file name extension so you don't know what the type is when you just look at the file then we've got the untrusted file name so this is the actual original file name we stored this as well and here this is the first thing we store in the upload result this is the the original file name this not really necessary here it seems then we've got again the the random name for the the file that is then stored and then the most important thing maybe here is that we get the path with content root path and then a folder you like make sure to create this folder and then also the the new name for the file and then we with these lines here we create the file and store it then under this path and in the end we also set the stored file name here and add the upload result to the complete list and return everything all right so this is now our controller name is or the uri is api controller name so file and this is now what we use in our index file here directly in the code block i know there are better ways to do that and we do that of course in a couple of other tutorials but still this should work as well so let's just continue here and after we edit the contents now and after the forage we make our call so the response then is await http and of course we have to inject something here and that would be the http client so let's do that real quick with add inject http client call this http with that now we can make our web api calls our web service calls and in here now what you want to use is the post method post async this time simply the uri is api and then file and here also we send the content now all right the form content okay now our new upload results then so what is returned is upload results awaits response and then the content and from that read from json async upload result need the namespace here alright now this is almost correct this is a list of upload results and after we fix this little thing here now let's also add these new upload results to the upload results we already have in our application right so maybe the user already added some files and we displayed them already and then the user added some more files so let's just add them then again and don't overwrite the complete list so with if a new upload results is not now we check if well they are not null and then we say upload results forgot that i think yeah we have to add the upload results here as well of course so here now private list upload results upload results is a new list of upload results all right yeah stop it because we haven't implemented this here and now upload result results is upload results concat and then new upload results to list all right and now what we want to do in the html is the only thing you want to add really is we also want to see the start file name right here we we get the file name information without uploading the file but then again on the controller in the controller on the server we also added a stored file name and we also want to display this thing here so what we need is we need a little function to get the start file name from the original file name so let's just add a little function here private string could be now get stored file name with the original file name here and in here now we just say upload results so we want to find the upload result with the given file name here upload results single or default where the file name equals the given file name all right and if the upload result then is not now we return [Music] upload results and then start file name and otherwise we return something like file not found all right and now here in here in the html what you want to do is again just also display the stored file name and do that with a little span here so stored file name is then again stored file name with the file name so many file names all right save everything we've got our html we've got this method here as well [Music] and now let's let's just test that i would say so here's our application let's see we only want to upload batman open and nothing happens here let's open the console maybe okay these are no errors so we should care about maybe we have to restart the application manually is it oh yeah of course it stopped jesus so let's just run it now you're we're talking right so now let's let's just upload batman there it is and it already worked isn't that nice so batman is uploaded and you see this is the crazy file name now let's add the other two here open we've got iron man and spider-man now let's have a look at the the the folder here uploads this is the file isn't that nice so here now you see batman iron man spider-man and these are the file names the stored file names and we can actually just move them here and then we see this crazy iron man guy and it actually works now that's nice i was actually expecting that we run into some errors here but this this works like a charm now the thing is this tutorial is already half an hour long approximately and of course when these files are now stored on your server well doesn't help pretty much because you also want to download them right so this is a little bit more complicated actually because well it's not that complicated but but you have to think about this and we will cover this in next week's tutorial i know i will explain why in a minute first let me push this to github and then you can check out the code in the video description there you will find the the github repository but for the file upload tutorial that's it thank you very much yeah that's it now again i told you already file download is coming next week hopefully but i really think so and of course if this week is already here and you're watching this video now later then um well just check out the info cards or the links in the video description the pinned comment maybe you will find the file download tutorial as well if you wanna if you wanna find it it is on my channel so thank you very much this is the file upload for today i hope you liked it and learned something if so please please please please click the like button subscribe to my channel don't forget the bell icon it does make a difference thank you so so much everybody also maybe you want to check out my newsletter for more.net 6 stuff for instance and then you will be the first to know when the file download tutorial is online so maybe this is something for you also additionally online courses and stuff regarding web development with dot nets and the last thing again thank you so much for all the coffees and teas and whatever it is i can really use it i turn code no i turn coffee into code yeah that's the correct way to say it and i hope i've got enough coffee so that i can bring you the file download tutorial as well so again thank you so much for your support thank you very much for watching if you want to see more tutorials again check out the newsletter or check out the videos here on the site maybe there is something for you another tutorial maybe and then just binge watch all my tutorials and then we can get to know each other a bit more better that would be really really nice so again thank you so much for watching thank you so much for your time oh and my mom is watching so hi mom love you and i hope i see you next time take care

Channel: Patrick God

Views: 14,758

Keywords:

Id: H-mrghoSjxI

Length: 32min 24sec (1944 seconds)

Published: Tue Jul 26 2022