React FileUploader - Server-Side Implementation in ASP.NET

Depending on whether the FileUploader sends Ajax requests or uses an HTML form to upload files, the server must be configured differently. Ready-to-use implementations for both these cases are given below.

See Also

Ajax Upload

C#
VB
  • [HttpPost]
  • // "file" is the value of the FileUploader's "name" property
  • public ActionResult AsyncUpload(HttpPostedFileBase file)
  • {
  • // Specifies the target location for the uploaded files
  • string targetLocation = Server.MapPath("~/Files/");
  •  
  • // Specifies the maximum size allowed for the uploaded files (700 kb)
  • int maxFileSize = 1024 * 700;
  •  
  • // Checks whether or not the request contains a file and if this file is empty or not
  • if (file == null || file.ContentLength <= 0) {
  • throw new HttpException("File is not specified");
  • }
  •  
  • // Checks that the file size does not exceed the allowed size
  • if (file.ContentLength > maxFileSize) {
  • throw new HttpException("File is too big");
  • }
  •  
  • // Checks that the file is an image
  • if (!file.ContentType.Contains("image")) {
  • throw new HttpException("Invalid file type");
  • }
  •  
  • try {
  • string path = System.IO.Path.Combine(targetLocation, file.FileName);
  • // Here, make sure that the file will be saved to the required directory.
  • // Also, ensure that the client has not uploaded files with malicious content.
  • // If all checks are passed, save the file.
  • file.SaveAs(path);
  • }
  • catch (Exception e) {
  • throw new HttpException("Invalid file name");
  • }
  • return new EmptyResult();
  • }
  • <HttpPost>
  • Function AsyncUpload(file As HttpPostedFileBase) As ActionResult
  • ' Specifies the target location for the uploaded files'
  • Dim targetLocation As String = Server.MapPath("~/Files/")
  •  
  • ' Specifies the maximum size allowed for the uploaded files (700 kb)'
  • Dim maxFileSize As Integer = 1024 * 700
  •  
  • ' Checks whether or not the request contains a file and if this file is empty or not'
  • If (IsNothing(file) Or file.ContentLength <= 0) Then
  • Throw New HttpException("File is not specified")
  • End If
  •  
  • ' Checks that the file size does not exceed the allowed size'
  • If (file.ContentLength > maxFileSize) Then
  • Throw New HttpException("File is too big")
  • End If
  •  
  • ' Checks that the file is an image'
  • If (Not file.ContentType.Contains("image")) Then
  • Throw New HttpException("Invalid file type")
  • End If
  •  
  • Try
  • Dim path As String = System.IO.Path.Combine(targetLocation, file.FileName)
  • ' Here, make sure that the file will be saved to the required directory.'
  • ' Also, ensure that the client has not uploaded files with malicious content.'
  • ' If all checks are passed, save the file.'
  • file.SaveAs(path)
  • Catch ex As Exception
  • Throw New HttpException("Invalid file name")
  • End Try
  •  
  • Return New EmptyResult()
  •  
  • End Function

You can pass the exception messages to the client using a custom action filter:

C#
VB
  • [NonAction]
  • protected override void OnActionExecuted(ActionExecutedContext filter) {
  • var exception = filter.Exception;
  • if (exception != null) {
  • filter.HttpContext.Response.StatusCode = 500;
  • filter.Result = new JsonResult {
  • Data = exception.Message
  • };
  • filter.ExceptionHandled = true;
  • }
  • }
  • <NonAction()>
  • Protected Overrides Sub OnActionExecuted(ByVal filter As ActionExecutedContext)
  • Dim exception As Exception = filter.Exception
  • If exception IsNot Nothing Then
  • filter.HttpContext.Response.StatusCode = 500
  • filter.Result = New JsonResult With {.Data = exception.Message}
  • filter.ExceptionHandled = True
  • End If
  • End Sub
See Also

HTML Form Upload

C#
VB
  •  
  • public ActionResult SyncUpload() {
  •  
  • // Specifies the target location for the uploaded files
  • string targetLocation = Server.MapPath("~/Files/");
  •  
  • // Specifies the maximum size allowed for the uploaded files (700 kb)
  • int maxFileSize = 1024 * 700;
  •  
  • // Checks whether the request contains any files
  • if(Request.Files.Count == 0)
  • return View("Index");
  •  
  • HttpFileCollectionBase files = Request.Files;
  • for (int index = 0; index < files.Count; index++ ) {
  • HttpPostedFileBase file = files[index];
  •  
  • // Checks that the file is not empty
  • if (file.ContentLength <= 0)
  • continue;
  • string fileName = file.FileName;
  •  
  • // Checks that the file size does not exceed the allowed size
  • if (file.ContentLength > maxFileSize)
  • continue;
  •  
  • // Checks that the file is an image
  • if (!file.ContentType.Contains("image"))
  • continue;
  •  
  • try {
  • string path = System.IO.Path.Combine(targetLocation, file.FileName);
  • // Here, make sure that the file will be saved to the required directory.
  • // Also, ensure that the client has not uploaded files with malicious content.
  • // If all checks are passed, save the file.
  • file.SaveAs(path);
  • }
  • catch (Exception e) {
  • continue;
  • }
  • }
  • return View("Index");
  • }
  •  
  • Function SyncUpload() As ActionResult
  • ' Specifies the target location for the uploaded files'
  • Dim targetLocation As String = Server.MapPath("~/Files/")
  •  
  • ' Specifies the maximum size allowed for the uploaded files (700 kb)'
  • Dim maxFileSize As Integer = 1024 * 700
  •  
  • Dim files As HttpFileCollectionBase = Request.Files
  •  
  • ' Checks whether the request contains any files'
  • If files.Count = 0 Then
  • Return View("Index")
  • End If
  •  
  • For i = 0 To files.Count - 1
  • Dim file As HttpPostedFileBase = files(i)
  •  
  • ' Checks that the file is not empty'
  • If (file.ContentLength <= 0) Then
  • Continue For
  • End If
  •  
  • Dim fileName As String = file.FileName
  •  
  • ' Checks that the file size does not exceed the allowed size'
  • If (file.ContentLength > maxFileSize) Then
  • Continue For
  • End If
  •  
  • ' Checks that the file is an image'
  • If (Not file.ContentType.Contains("image")) Then
  • Continue For
  • End If
  •  
  • Try
  • Dim path As String = System.IO.Path.Combine(targetLocation, file.FileName)
  • ' Here, make sure that the file will be saved to the required directory.'
  • ' Also, ensure that the client has not uploaded files with malicious content.'
  • ' If all checks are passed, save the file.'
  • file.SaveAs(path)
  • Catch ex As Exception
  • Continue For
  • End Try
  • Next i
  •  
  • Return View("Index")
  • End Function
See Also

Chunk Upload

View Demo

C#
VB
  • // The structure that represents chunk details
  • public class ChunkMetadata
  • {
  • public int Index { get; set; }
  • public int TotalCount { get; set; }
  • public int FileSize { get; set; }
  • public string FileName { get; set; }
  • public string FileType { get; set; }
  • public string FileGuid { get; set; }
  • }
  • [HttpPost]
  • // "file" is the value of the FileUploader's "name" property
  • public ActionResult ChunkUpload(HttpPostedFileBase file, string chunkMetadata)
  • {
  • // Specifies the location for temporary files
  • string tempFileLocation = Server.MapPath("~/Files/Temp/");
  • // Specifies the target location for uploaded files
  • var targetLocation = Server.MapPath("~/Files/");
  •  
  • try {
  • if (!string.IsNullOrEmpty(chunkMetadata))
  • {
  • // Gets chunk details
  • ChunkMetadata metaDataObject = JsonConvert.DeserializeObject<ChunkMetadata>(chunkMetadata);
  •  
  • // ...
  • // Perform security checks here
  • // ...
  •  
  • // Creates a directory for temporary files if it does not exist
  • if (!Directory.Exists(tempFileLocation))
  • Directory.CreateDirectory(tempFileLocation);
  •  
  • var tempFilePath = Path.Combine(tempFileLocation, metaDataObject.FileGuid + ".tmp");
  •  
  • // Appends the chunk to the file
  • AppendContentToFile(tempFilePath, file);
  •  
  • // Saves the file if all chunks are received
  • if (metaDataObject.Index == (metaDataObject.TotalCount - 1))
  • System.IO.File.Copy(tempFilePath, Path.Combine(targetLocation, metaDataObject.FileName));
  • }
  • }
  • catch {
  • return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
  • }
  • return new EmptyResult();
  • }
  •  
  • void CheckMaxSize(FileStream stream)
  • {
  • if (stream.Length > 1024*400000)
  • throw new Exception("File is too large");
  • }
  •  
  • void AppendContentToFile(string path, HttpPostedFileBase content)
  • {
  • using (FileStream stream = new FileStream(path, FileMode.Append, FileAccess.Write))
  • {
  • content.InputStream.CopyTo(stream);
  • CheckMaxSize(stream);
  • }
  • }
  • ' The structure that represents chunk details
  • Public Class ChunkMetadata
  • Public Property Index As Integer
  • Public Property TotalCount As Integer
  • Public Property FileSize As Integer
  • Public Property FileName As String
  • Public Property FileType As String
  • Public Property FileGuid As String
  • End Class
  • <HttpPost>
  • Function ChunkUpload(file As HttpPostedFileBase, chunkMetadata As String) As ActionResult
  • ' Specifies the location for temporary files
  • Dim tempFileLocation As String = Server.MapPath("~/Files/Temp")
  •  
  • ' Specifies the target location for uploaded files
  • Dim targetLocation = Server.MapPath("~/Files/")
  •  
  • Try
  • If (Not String.IsNullOrEmpty(chunkMetadata)) Then
  • ' Gets chunk details
  • Dim metaDataObject As ChunkMetadata = JsonConvert.DeserializeObject(Of ChunkMetadata)(chunkMetadata)
  •  
  • ' ...
  • ' Perform security checks here
  • ' ...
  •  
  • ' Creates a directory for temporary files if it does not exist
  • If (Not Directory.Exists(tempFileLocation)) Then
  • Directory.CreateDirectory(tempFileLocation)
  • End If
  •  
  • Dim tempFilePath = Path.Combine(tempFileLocation, metaDataObject.FileGuid + ".tmp")
  •  
  • ' Appends the chunk to the file
  • AppendContentToFile(tempFilePath, file)
  •  
  • ' Saves the file if all chunks are received
  • If (metaDataObject.Index = (metaDataObject.TotalCount - 1)) Then
  • System.IO.File.Copy(tempFilePath, Path.Combine(targetLocation, metaDataObject.FileName))
  • End If
  • End If
  • Catch ex As Exception
  • Throw New HttpException("Bad request")
  • End Try
  • Return New EmptyResult()
  • End Function
  •  
  • Function AppendContentToFile(path As String, content As HttpPostedFileBase)
  • Using stream As New FileStream(path, FileMode.Append, FileAccess.Write)
  • content.InputStream.CopyTo(stream)
  • CheckMaxSize(stream)
  • End Using
  • End Function
  •  
  • Function CheckMaxSize(stream As FileStream)
  • If (stream.Length > 1024*400000) Then
  • Throw New Exception("File is too large")
  • End If
  • End Function
See Also