Uploading and Downloading files in HTML on an ASP.Net Server

Uploading files may seem a huge task for some, but it is really simple. Upon the many abstractions provided by the browser and the .NET ecosystem. A handful lines of code is that is all needed to accomplish such a task. Now this is all abstractions. You can always do it yourself without the abstractions. The same goes for downloading a file.

I expect you to know how to use ASP.Net. This article is just an overview on the process.

Using a Form:

Will create the index.html file to host the form:

<form enctype="multipart/form-data" action="http://localhost:5000/upload" method="POST">
 <input type="file" name="file" />
 <button type="submit">Upload</button>
</form>

Note the form must have multipart/form-data because the way binary data is uploaded over HTTP is not the same as other form input types. Then just adding the action which is the URI of the form as well as the POST HTTP method. Then the <input> of type file is important to upload any binary file. And a button to submit.

Creating the web API using .NET 5 is simple:

dotnet new webapi <Project Name>

Will remove the sample weather controller that gets generated. Will now create a new controller FilesController in the Controllers directory. Will code it as follows as I will download the uploaded file:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace FileUploadDownload.Api.Controllers
{
 [Route("")]
 [ApiController]
 public class FilesController : Controller
 {
 [HttpPost("upload")]
 public IActionResult Upload([FromForm] IFormFile file)
 {
 return File(file.OpenReadStream(), "text/plain");
 }
 }
}

Now run the dotnet application then open the index.html page in the browser directly. Assuming you are using port 5000 same as me for the API, everything should work. Else switch the port/Url in the action of the form to the api server’s port.

Note an important thing is that the name of the parameter passed in to upload handler is the same as name="file" in the form.

To upload multiple files, you can do the following to the input element in HTML:

<input type="file" name="file" multiple />

And set the handler to accept the following parameter instead of a single IFormFile:

[FromForm] IEnumerable<IFormFile>

Note I am returning a file result from the api with Content-Type equal to text/plain for the client, in this case so the browser renders it as text. This is the download part.

Note IFormFile is a wrapper for a form-uploaded file.

To upload a file using Json if a form is not possible, you can read the file using the browser and encode it as text (most commonly Base64 is used for uploading binaries) and send it in an API call in Json.

Notes:

Now this method works for smaller files, let’s say you want to upload a file north of 1GB, this requires a server that has enough memory first to handle this scale and second a way to upload multiple parts of a file in multiple requests. A technology like HTTP Live Streaming (HLS) streams data. Others exist. Other protocols such as File Transport Protocol (FTP) are made for file transfer.

All the source code is below: https://github.com/Morr0/File-Upload-Download

More on the rules of uploading files here: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

You can also expand the file input to accept only certain extensions.

Conclusion:

This articles had covered how to upload and download files. It is the same for both text and binary files.

Thanks for reading.