Uploading and Downloading files in HTML on an ASP.Net Server
HTTP is such a powerful protocol that it powers the web, all the sites you know and love. This article will show an overview of uploading and downloading a file and will not delve into details on anything. It is just an illustration of the process.
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 ](https: //dotnet.microsoft.com/) 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 ](https: //dotnet.microsoft.com/apps/aspnet). This article is just an overview on the process. ### Using a Form: Will create the `index.html` file to host the form: ```html <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: ```bash 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: ```c# 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: ```html <input type="file" name="file" multiple /> ``` And set the handler to accept the following parameter instead of a single `IFormFile`: ```c# [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 ](https: //en.wikipedia.org/wiki/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) ](https: //tools.ietf.org/html/rfc8216) streams data. Others exist. Other protocols such as [File Transport Protocol (FTP)](https://en.wikipedia.org/wiki/File_Transfer_Protocol) 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.