ASP.NET Core File Upload Tutorial

everyone welcome to my video about uploading files in dotnet core in this video I'm gonna show you how to upload a single file I'm gonna show you how to upload multiple files I'm also going to show you how to upload files as part of a bigger model so maybe it will include some other properties and then I'm gonna show you how to do the exact same thing but using javascript and how that works alright because chances are you're already using a JavaScript framework and you might want to know how to do that I'm going to leave the timestamps in the description so if you want to skip to a particular part go ahead I have here I have set up here a minimalistic project so I have my MVC service added and the MVC with default routes middleware and I have developer exception pages are enabled I have my home controller which just points to my home page right I also have my view imports and view start and layout and there is really a view start just sets my layout and the view imports has nothing and then the layout is literally this right so this video is going to be primarily about uploading files ok so first thing that we want this is is we want to be able to capture a file alright so let's go ahead and I'll make a div I'll give this a little caption and I'll just say single file and upload alright I'm gonna go ahead and create a form at the moment I don't have anywhere where I actually pointed to so I want to be able to point it to a home controller action alright so I don't have my tag helpers here so let me go ahead into my view imports I'm gonna say add tag helper I'm gonna grab all my tag helpers from Microsoft and asp net or and these and this is gonna it had helpers okay and now if I'm lucky yep ASP controller I'm always gonna pretty much say home I'm pretty sure it can figure it out on its own but I'm gonna be verbose here and I'm gonna say I'm pulling it pointing pointing it to home I'm gonna upload it to single file another thing you want to do is you want to include multi-part form data on your form okay let me move this to a new line and this is what's going to be the building blocks for our form right so now I want an input and I will say off type file name I'm gonna give it file so I'm gonna be binding it to an object named file and whoa and value I don't need the value here okay and then all I want to do is have a button with which I can submit my form so let's submit boom okay nice so let's go ahead and create a action public I action result single file and in here I'm gonna return you so I'm going to actually redirect to action I'm going to redirect to index okay so I'm going to redirect back to this home page okay so how do we accept file format so provides us with an interface called I formed file okay let's call this file so this file needs to be corresponding to this sorry to this name here and let me just put a breakpoint here and let me run this application this here okay so single file upload let me choose a file and let me submit it and there we go so if I hover over this file we should see the name of the file and the content length so how many bytes it has etc right cool so we have the file how do we save it so let's go ahead and type in a make a using statement let's make a file stream new file string I will need to import system the IO and let me make the scope here alright so the first thing I'm gonna need is a bath so I'm just gonna type that in here for now I will need a file mode which is going to be create so I'm creating a file I'm gonna save it and then file access and I'm writing so I'm gonna need to write alright so new file stream path which we're gonna populate in a second file mode and create alright so when you execute your application we somehow need to find out the path at where it's located right dotnet core provides us with a I hosting and by ROM mint I'm just gonna call it end so this interface is available across all ethnic or application and what this does is provides us with information about our environment right so I'm gonna create a there essentially this variable is gonna get the directory so content route path okay and this is gonna be the route path of our application so this folder right here so when I save the image it's gonna be somewhere here so then I'm gonna go ahead and say path dot combined and I'm gonna combine the directory with a file name so I'm just gonna call that file dot PNG a and this is the filename that is going to be creative with I'm going to be uploading images for simplicity and directory again this is going to be the directory of our application here okay so now let's take the file string and sorry we're going to take the file and we're going to copy it to the file stream here okay and that's it okay so let's go into debugger and let's see this work and bring this up select image boom okay let me open this up and here we can see this image now appeared cool let's take a look at this there right here and you can see that it points to exactly to the location of our application and if we go ahead and inspect the environment environment and face we can see a bunch of information here that we can access like the environment and name the contact path and the web root path what this is is the location of your WWE which I don't have so the value for that is no so if you would prefer to use that instead of the content Repat to navigate to be my guest ok so we are saving a single file okay how about we go ahead how do we go about uploading multiple files alright so let's go ahead and again we will make a public high action result and we will say multiple files and all I'm gonna do is I'm gonna say I numerable so this is an indexable and finch face and again I'm just gonna say I form file and I'm gonna call this files let me make sure this is important okay and again I'm gonna return or your direct to index I am going to actually move this up here I'm gonna make this dere global so I can reuse it okay and let's go ahead and put the underscore here so we can see it okay nice now let's go ahead copy this file stream here and what I'm gonna do is I'm gonna say for each of our file and files we're gonna do this thing here okay I'm also gonna just create an index so I can name my files accordingly okay so all I'm gonna do is basically say file index right so I'm gonna it's right here so what I actually can do is put the plus plus here and your movie here okay so let's go ahead and create the form for this now I'm gonna just copy this div and I'm gonna paste it here and I'm gonna say multiple file uploads upload yeah we leave the ank types the same but for our input feared field we want to say multiple and the name we want to change it to files because remember we said files here okay now let me put a breakpoint here I'm going to run my application now you let's go ahead and choose a couple of files here so then take these three here I'm gonna okay pardon me I forgot to point it to this new action so multiple files let me point it to here well let me make sure that it hasn't saved okay hasn't all right let me do the upload again and submit okay so has done here's our three files all in tactic and see while I'm hovering over them I can see the image that has been uploaded okay nice so okay so again we are uploading multiple files cool now how about having a file as part of the form okay so let's go ahead and create a muddles folder you can call this entities view models whatever it is for me it's just a data objective so don't confuse it with a database object this is just a data object for this example so let's create some form alright so this is gonna be some example form where I want to say a string name and again I'm gonna go ahead and provide my I form file like so I'm gonna say file ok so pretty simple let's go ahead and try to pass this to a home controller right so public I action result and let's go ahead and call this file and model and let's say some form let's import and we're gonna call this some form and same as before I'm gonna copy this thing from here I'm gonna paste it into here and form I want to grab the file from there some form dot file and here I'm actually going to pass in some form dot name so this is gonna be the name for the file okay so this is getting a little bleeding of the screen so let me put it here seems self explanatory let's go ahead and make a form for this so let's again I'll copy this let me put it here and let's say file and modal model upload alright so again egg type let me make sure I get the action correct this time file in model I'm gonna go ahead and make another input so this is just going to be text multiple doesn't matter now I need to navigate to my property here so I'm gonna take some form the file is some form and the name for it is file so some form file and for the text it's going to be some form name okay so we have to sign it basically this is how model binding works in dotnet core so some form is the name of the variable here so if we would have and named it Wawa we will have to name this wha-why as well okay I'm gonna keep it at some form okay let me remove this breakpoint unless me let me put a breakpoint here okay let's go ahead and run this okay so sample let me cap submit okay there we go and here we can see this sample file again saved and it's being passed as part of this form okay now when you are going to be using at model whatever and you're going to be using the ASP four tag helper these names will be created for you automatically so you don't generally don't need to worry about model binding in that sense these will be created automatically for you and the model will be bound automatically but this is this will be a good example when we come to the Java Script solution now so let's go ahead and remove this but we will what we will do is we will reuse these methods and let me just actually put my breakpoints here again let me get rid of the images so we know that they're writing okay now for my Java Script solution I'm going to create a section scripts let me double check that it's in my layout and now it's not render section scripts okay so this this is where my scripts are going to be rendered and I'm gonna leave a link for Axios here just something that I'm gonna be using to help me make asynchronous JavaScript requests okay so this is just a library it's pretty widely used pretty widely known the concept should stay the same fewer using angular or react if basically we are going to be using form body to post these or and what I mean by that you'll see in a second okay in here let me create a script tag helper okay I will close this down and I'm not actually using this let me close this down as well and make this fullscreen okay so let's go ahead and copy this again and in here I'm gonna say let me a single file upload but I will say JavaScript okay so I'm gonna delete the form I'm gonna delete the text I'm gonna leave the file I'm gonna say it's a single file I don't need the name I will have the button but I don't need to submit on there anymore what I do need is I want to be able to grab this file when it changes so let's actually remove this submit as well but what we're gonna do is basically call a function to submit this file right so let's go ahead and make an ID so I'll say it's a single file and unchanged when I call upload file function and I'll probably not need dat let me let me scrap that so let's create a new function so bar upload file pulse function and I'm gonna pass the event here and I'm gonna console.log the event okay so we can take a look around let me go into here ok choose a file I'm gonna go ahead and open this and actually forget to pass the event here so let me go ahead refresh this the blood okay so here's our event let's go ahead and check it out we have the target which is essentially this input element here and the rest of this doesn't matter we want to be able to access the target and then we want to be able to go into the files and select this file here right and this is going to be the information that we care about and what we're going to be submitting so we want to go and we want to basically grab the file which is going to be at E target and this is an array so file list so and here we're going to be grabbing this single file okay I'm going to go ahead and remove this and now what I want to do is I want to make this part of a JavaScript form which I can submit using Axios okay so let's create form data equals new form data what we can do is we can do form data dot append and here is where we pretty much do the same thing that we do with the name here so we're going to set the name to file and then all we're gonna do is pass the file okay now we're gonna take our Axios we're going to post we're going to post to home slash single file now one thing you might get caught is when you're passing Jason you need a front body when you are passing form data you don't need the front body so in case sometimes you might get the for15 error for incorrect media type I just remember that you don't need from a from body when you are passing form data all right so let's go ahead and submit form data and then I I don't want anything after that hey so I have the breakpoint here let me refresh this let me choose a file I'll open this and there we go let's take a look at the files here and here it is this file is oh here again so that same image okay nice so you might guess how the rest of it is gonna work let's go ahead and create multiple file upload with JavaScript so upload let's create a new function upload files say files here I'm not gonna I'm not gonna forget to say multiple so we can have multiple files here now the way we grab the file here really what we want to do is grab the files so these are going to be our files and then I'm gonna create a for loop so I'm not gonna do any fancy JavaScript in case you don't know JavaScript I'm gonna create a variable call it zero less than files dot length and I'm gonna increment it let's move form data up here and let's move the append where we append to the form data inside the for loop now what I want to do is I want to change the name here to files same as we have files here and that what I want to do is I want to grab each individual file one by one and append it to this name okay let me not forget to change their the location where I'm uploading it to let me open up my I'll refresh okay and let me choose a couple of images here and [Music] voila we have all three images here they have successfully written nice okay so moving on to this example this is going to be again a relatively simple let's copy this and let's call it upload files to model okay are rather file upload file to model let's copy this I'm gonna complete this header here and I'll and model gjs okay I'm not gonna have multiple here I'm gonna copy the name of the function here next thing what I want to do is I want to get the text field here okay and what I want to do is I don't really want to give this a name I will rather give this an ID and I want to say file name so this is where I'm going to be inputting the final name and it's just to be able to grab the value of this file really so let's create file name equals document don't get element by ID now let's say file name double check that the ID is the same yes sir it is and then let's grab the value nice next thing we want to do is again we want to make sure the word just grabbing the one file that we have here nice we're creating the form data let's get rid of this loop and what we want to do is the same thing we did with the names here right so some formed file let's go ahead and pop this into here alright and this is the way we are going to append this file and let's say name here and this is how we're going to be popping in our name as well let me change the file in model as well like so upload file tomorrow yep that's fine let's give this a refresh we'll say buh buh choose file and at image some formulas check it there we go Bobo that was our our form file and there is the bubble image with in there okay so that's essentially it for the file uploads I'm gonna leave the code in the description so if you want access to this I'm gonna host it on get help so you can go ahead check it out fork it study it examine it put it under a microscope do whatever you want with it hopefully you'll learn something from this and if you liked the video leave a like subscribe for more awesome content if you have any questions leave them in the comments if you think I missed something out one word of warning though there is a bug in one version of.net or I think it's to point to point to where the model binding is not correct so if you are essentially if your program just hangs when you submit the form make sure you download the latest version of the SDK okay but if you miss this part of me saying because you skipped the video shame on you as always thanks for watching and I hope to see you in my other videos

Channel: Raw Coding

Views: 32,770

Keywords: dotnet, dotnet core, dotnet core tutorial, dotnet core guide, .net, .net core, .net core tutorial, .net core guide, asp.net, asp.net core, asp.net core tutorial, asp.net core guide, tutorial, guide, beginner, intermediate, file, file upload

Id: l69kUe1fNSc

Length: 26min 9sec (1569 seconds)

Published: Mon Jun 17 2019