受欢迎的博客标签

Five different ways of File Uploading with ASP.NET Core

Published

http://sikorsky.pro/en/blog/file-uploading-with-aspnet-core-what-options-do-we-have

We are going to test the different ways of file uploading with an ASP.NET Core web application. We will start from the oldest one based on the forms and finish with the most modern one that uses JavaScript.

The Client-Side Part

1. File Uploading Using a Plain HTML File Input With a Submit Button

Everyone knows a good old file input with a submit button inside a form:

It doesn’t work better than it looks: you need to click the submit button after a file is selected and your page will be reloaded. But it works everywhere. HTML is simple (multiple attribute allows the file input to select and upload more than one file at the same time):

 

2. File Uploading Using a Plain HTML File Input Without a Submit Button

Sometimes we just need to get a file from a user with a minimum of effort. We can use some JavaScript to modify our form from the option 1 to make it submit automatically:

 

As you can see, we have removed the submit button and added the onchange attribute to the file input. Now, when a file is selected, the file input will call the submitForm JavaScript function to sumbit the form:

 

3. File Uploading Using a Plain HTML File Input With a Custom UI and Without a Submit Button

Option 2 is a bit better than option 1, but the file input still looks ugly. It is possible to apply some CSS to change its appearance to something like this:

HTML:

 

And CSS:

 

Here we have made the file input huge and transparent, and put it inside the container with the label. The label ignores mouse events, so our invisible file input is able to receive them. This approach has good enough support and is widely used. Also, it is possible to display the names of the selected files if you need that. But it still reloads the page.

4. File Uploading Using an IFrame with a Plain HTML File Input With a Custom UI and Without a Submit Button

This option is almost the same as the previous one, but the file input is put inside an iframe. It provides better user experience because it doesn’t reload the page after a file is uploaded (actually it does reload, but it reloads its own small page inside the iframe, so it is not visible to a user). This option is good idea when it is not possible to use the newer JavaScript approaches decribed below.

To use this method we need to add the iframe to our page:

 

5. File Uploading Using a Plain HTML File Input With a Custom UI and jQuery.ajax() Function

Now let’s take a look at the more modern way of files uploading that uses JavaScript instead of a form. We will use the jQuery.ajax() function, not browser’s native XMLHTTPRequest object, because it is much easier and more convenient.

To be able to send the files to a server using JavaScript we need to get the files from a user first. We have two options for that: the file input (again!) and the drag and drop feature (will be described below too).

To test the file input approach we need to modify HTML from the option 3 a bit (the only thing we have to change is onchange attribute of the file input):

 

As you can see, onchange attribute of the file input contains the uploadFiles function call now (instead of the submitForm one). This function takes the files selected by a user and uploads them to a server using the jQuery.ajax() function:

 

Please note how we get the files from the file input and then combine them into a single FormData object. This is really good approach, the only problem is that it doesn’t have so perfect browsers support like options 1, 2, 3 and 4.

6. File Uploading Using the Drag and Drop feature and jQuery.ajax() Function

And finally, we will take a look at the drag and drop feature. It is quite cool to drag and drop files to your web application. All you need for that is simple HTML and some more JavaScript:

HTML:

 

And JavaScript:

 

The difference is only in the way of getting the files. Now we use event.dataTransfer.files instead of input.files from the previous option.

The Server-Side Part

The important thing is that the server-side part is the same for all of the examples in this article. And it is quite simple:

 

As you can see, action receives the list of the uploaded files and simply saves them.

Conclusions

Using the options 5 and 6 where it is possible probably is the best choice because they provide better user experience. At the same time, options 3 and 4 has better browsers support and might be used where compatibility with older browsers is important.

I have created the demo project for this post. Feel free to ask if you have any questions!