File Uploading with ASP.NET 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 an old good 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 submit 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 described 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. (But it is still possible to get rid of jQuery.)
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):
https://gist.github.com/DmitrySikorsky/4fee200ac4d7d85bd0630f7b36fb4a67
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!