Upload multiple files in asp net core mvc

this is part 54 of a speedor net core tutorial in this video we'll discuss how to upload multiple files in asp.net Co MVC this is continuation to our previous video part 53 so please watch part 53 before proceeding this is the same create employee form that we've been working with so far in this video series when we click this browse button at the moment I am able to select only one file that I want to upload even if I hold down the ctrl or shift key and then try to select multiple files notice the already selected file is automatically getting D selected now the first thing that we want to be able to do is allow the user to be able to select multiple files there is one simple thing that we need to do to achieve this and that is by including multiple attribute on this input element and this multiple attribute supports selecting multiple files let's look at this in action here is our create view and this is the input element that generates the file upload control to allow the user to be able to select multiple files we want to include multiple attribute let's save our changes and take a look at the browser reload the webpage click the Browse button notice now I'm able to select multiple files by holding down the ctrl or shift key and in the file name text box we see the names of the two files that we have selected to be able to select and post multiple files to the server we need to make one more change on our create view at the moment this input element is bound to the photo property and this photo property is in our model class employee create view model and that class is right here notice at the moment the data type of the photo property is a single iPhone file now to be able to allow the user to be able to post multiple files we want to change this from iphone file to list of iphone file let's also change the name of the property from photo to photos and then bring up visual studio refactoring tools by pressing ctrl . notice now we have the option to rename all instances of photo to photos at this point if we take a look at our create view notice the property is automatically renamed to photos and the same is true even within our home controller we have one small issue with the file upload user interface at the moment we have multiple files selected but notice where the file upload control we only see the name of one of the files now what we want to be able to do is if we have multiple files selected then we want to display within the file upload control the number of files that we have selected for example in this case we have two files selected on the other hand if I select only one file then we want to display the name of that one file here is the jQuery code that could help us do this to easily understand this jQuery code I'm going to log dollar this to the browser console and inspect it let's comment this jQuery code that we already have here log dollar this to the browser console builder solution notice we have a build failure that's because of the errors in home controller let's fix those errors first notice from the intelligence model dot photos is no longer a single iPhone file it is a list of iPhone file so we want to check if model dot photos is not equal to null and model dot photos dot count is greater than zero if the count is greater than zero then that means user has uploaded one or more files so we want to loop through each of the files and execute this piece of code so let's use a for each loop as we are looping through what we are getting back is an iPhone file so let's create a variable of type iPhone file I'm going to call this variable photo we don't have the required namespace so let's bring that in we want to loop through model dot photos inside this for each loop instead of using model dot photos we want to use our loop variable photo let's do the same on this line as well build our solution bell that succeeded so let's reload our webpage remember on our create view in the jQuery code in unchanged even handler we are logging dollar this to the browser console so let's launch browser developer tools by pressing f12 click on the console tab and then click the Browse button select multiple files that we want to upload notice we have an array of input elements that have this class custom file input logged it to the browser console that's because at the moment within our jQuery code we are in the change even handler of input elements that have this class custom file input at the moment within our create view we only have one input element with this class and that is our file upload control which is right here so within the array here if I expand this we only have one element and we can see that by looking at the length property and that one file upload control is present at index position 0 so if we expand this and scroll down in the list of properties that we have notice we have files property and the length of this is two because we have selected two files the first file is present at in X position 0 which is david dot PNG and the second file is present at index position 1 which is Sarah dot PNG with this information in mind it is easy to understand this jQuery code we'll get to this first line of code in just a bit they using dollar this here to get a reference to the array that contains all the input elements that have the class custom file input we know on our create view we only have one such input element and that input element is present at exposition zero and we know our file upload control has got files property so we are storing that in this variable if the length of files is greater than one that means the user has selected more than one file so we are appending to the length this string files selected so for example if we have two files selected then this string two file selected is displayed in this variable file label and here is that variable so what is this doing this is selecting the input element that has the class custom file label and if we look at our HTML it is this label that is present next to the input element so within this label we want to display that string so we are selecting that here and then displaying the string and we are doing that if we have selected more than one file on the other hand if we have selected just one file length will be one in that case we know that one file is present at index position zero in this files collection and we are getting the name of that file so if we have one file selected we display the name of that file in the interest of time I've already copied this code to the clipboard let's paste it within unchanged even handler right here save our changes and take a look at the browser notice now if we select a single file we see the name of that file and if we select multiple files we see two files selected let's fill in the rest of the employee details I'm going to name this employee test test a test comm and let's select his department as ID and create this new employee there we go we have our new employee created we can see this new employee on our list view as well now let's take a look at the images folder in File Explorer this is the folder into which our files are uploaded on the server the top two files are the files that we have just uploaded we have uploaded these two files in our previous demo at the moment you might be wondering for this new employee that we have just created we uploaded two photos but on this view we are displaying only one photo for this employee why is that well that's because at the moment there is a one-to-one relationship between employee details and their photo name that's because both the details are stored in one database table which is employees so let's take a look at that table now in sequel server object Explorer expand local DB databases employee databases of the employee details at the moment this is the file that is associated with the new employee that we have just created the file name ends with BB one underscore Sarah dot PNG and that's what is displayed on our view right here now if you want to store multiple photo names for a given employee then you want to split this one database table into two tables maybe something like employees and employee photos and then have one-to-many relationship between these two tables we're not going to do that we want to keep this example simple and fold your head we want just a single file to be uploaded for a given employee so off screen I'm going to undo all the changes that we have done in this video we'll implement the rest of the crud operations that is update and delete in our upcoming videos this is the piece of code that loops through the uploaded multiple files and saves them to the images folder on the server that's it in this video thank you for listening you you [Music]

Channel: kudvenkat

Views: 61,505

Keywords: asp.net core mvc multiple file upload, asp.net core multiple file upload, asp.net core 2.0 upload multiple files, asp.net core multiple file upload example, select multiple files to upload asp.net core, .net core multiple file upload

Id: 14ZqBoQIW-Q

Length: 10min 51sec (651 seconds)

Published: Thu May 09 2019