How To Allow Video Upload Mvc

File Upload is the process of uploading files from the user'due south system to the spider web application's storage. ASP.NET Core MVC actions support uploading of one or more than files using simple model bounden.

We accept covered the file upload support in ASP.NET Cadre Spider web API in detail in the article Uploading Files With .Internet Core Web API and Athwart . In that location we looked at how to upload a file using an athwart app on the client-side and an ASP.NET Cadre Web API on the server-side.

In this article, we are going to wait at how to achieve the same functionality in an ASP.NET Core MVC application.

VIDEO: Uploading Files with ASP.Internet Cadre WEB API and Angular video.

If y'all've missed some of the previous articles in the serial we recommend visiting the serial page: ASP.NET Cadre MVC Series.

To download this article'due south source code visit: File Upload in ASP.NET Cadre MVC.

Permit'due south become downwards to it.

Creating a File Input Command

To upload files, let's create a new ASP.Cyberspace Core MVC application, new FileUploadController and design an HTML form with a file input control for the Alphabetize activity:

<class method="mail service" enctype="multipart/form-data" asp-controller="FileUpload" asp-action="Index">     <div class="form-group">         <div class="col-md-10">             <p>Upload 1 or more files using this grade:</p>             <input type="file" name="files" multiple />         </div>     </div>     <div grade="form-grouping">         <div form="col-medico-10">             <input type="submit" value="Upload" />         </div>     </div> </grade>

In gild to support file uploads, we must specify the enctype every bit multipart/course-data . The enctype attribute specifies how the form data should exist encoded when submitting it to the server. The enctype attribute can be used simply if the form method is Mail .

The file input element supports uploading multiple files. By removing the multiple attribute on the input element, nosotros can restrict it to back up but a unmarried file.

The Office of Model Binding

We can access the private files uploaded to the awarding through Model Bounden using the IFormFile interface. Model Binding in ASP.Net Cadre MVC maps data from HTTP requests to action method parameters. IFormFile represents a file that is sent with the HttpRequest and has the following structure:

public interface IFormFile {     string ContentType { get; }     cord ContentDisposition { get; }     IHeaderDictionary Headers { get; }     long Length { get; }     string Name { go; }     string FileName { get; }     Stream OpenReadStream();     void CopyTo(Stream target);     Chore CopyToAsync(Stream target, CancellationToken cancellationToken = null); }

Every bit a security consideration, We should never rely on or trust the FileName property without validation.

When uploading files using model bounden and the IFormFile interface, the action method can accept either a single IFormFile or an IEnumerable<IFormFile> representing multiple files. We can loop through one or more uploaded files, save them to the local file system and then utilize the files equally per our application's logic:

public class FileUploadController : Controller {     ...      [HttpPost("FileUpload")]     public async Task<IActionResult> Alphabetize(List<IFormFile> files)     {         long size = files.Sum(f => f.Length);                                  var filePaths = new Listing<string>();         foreach (var formFile in files)         {             if (formFile.Length > 0)             {                 // full path to file in temp location                 var filePath = Path.GetTempFileName(); //we are using Temp file proper name just for the example. Add your own file path.                 filePaths.Add(filePath);                  using (var stream = new FileStream(filePath, FileMode.Create))                 {                     expect formFile.CopyToAsync(stream);                 }             }         }          // process uploaded files         // Don't rely on or trust the FileName property without validation.          render Ok(new { count = files.Count, size, filePaths });     } }

Let's place a breakpoint on the Index() method and run the application:

Once we choose files and click Upload, we can debug the code to see how files are uploaded to the server file system.

Hither we simply return the full number and size of files uploaded along with file paths.

Files uploaded using the IFormFile technique are buffered in memory or on disk on the webserver before being candy. Within the activity method, the IFormFile contents are accessible as a stream. In addition to the local file system, files can exist streamed to Azure Blob storage or Entity Framework.

OK, that'southward information technology for the file upload, let's summarize what nosotros've learned.