Html5 multiple Attribute
For multiple file selection, I am using HTML5 <input> type with multiple attribute. It’s a Boolean attribute and it takes values like true or false.
➡️ HTML5 Input Types and Attributes
Syntax
<input multiple />
Please remember, that many older versions of IE (IE 9 and below), will not support the multiple attribute. To set the value for the attribute, you may use multiple=true or simply multiple. Set multiple=false to remove multiple selection.
Create FileUpload Web API
Start Visual Studio, create a "New Project", choose Asp.Net MVC 4 Web Application and name it FileUpload.
From the Project Template for New ASP.NET MVC 4 Project select Web API template and press OK.
We don't need a "Model" for our example here. Therefore, we’ll create a controller only in our WebAPI.
Open "Solution Explorer" window in the project. Find Controllers folder, right click it and choose Add and Controller….
In "Add Controller" window, type "FileUploadController" in the Controller Name box. From the Template dropdown list, choose Empty MVC controller and click the "Add" button. It will create a ".cs" file (.vb for Visual Basic).
using System;
using System.Net.http;
using System.Web.http;
using System.IO;
namespace FileUpload
{
public class FileUploadController : ApiController
{
[HttpPost()]
public string UploadFiles()
{
int iUploadedCnt = 0;
// DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES.
string sPath = "";
sPath = System.Web.Hosting.HostingEnvironment.MapPath<("~/locker/");
System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
// CHECK THE FILE COUNT.
for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++)
{
System.Web.HttpPostedFile hpf = hfc[iCnt];
if (hpf.ContentLength > 0)
{
// CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE)
if (!File.Exists(sPath + Path.GetFileName(hpf.FileName)))
{
// SAVE THE FILES IN THE FOLDER.
hpf.SaveAs(sPath + Path.GetFileName(hpf.FileName));
iUploadedCnt = iUploadedCnt + 1;
}
}
}
// RETURN A MESSAGE.
if (iUploadedCnt > 0) {
return iUploadedCnt + " Files Uploaded Successfully";
}
else {
return "Upload Failed";
}
}
}
}Note: You must first create a folder in the root directory of your project called locker. You will upload your files in this folder. You may later name the folder as you wish.
Option Explicit On
Imports System.Net.http
Imports System.Web.http
Imports System.IO
Namespace FileUpload
Public Class FileUploadController
Inherits ApiController
<HttpPost()> _
Public Function UploadFiles() As String
Dim iUploadedCnt As Integer = 0
' DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES.
Dim sPath As String = ""
sPath = System.Web.Hosting.HostingEnvironment.MapPath("~/locker/")
Dim hfc As System.Web.HttpFileCollection =
System.Web.HttpContext.Current.Request.Files
For iCnt As Integer = 0 To hfc.Count - 1 ' CHECK THE FILE COUNT.
Dim hpf As HttpPostedFile = hfc(iCnt)
If hpf.ContentLength > 0 Then
' CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE)
If Not File.Exists(sPath & Path.GetFileName(hpf.FileName)) Then
' SAVE THE FILES IN THE FOLDER.
hpf.SaveAs(sPath & Path.GetFileName(hpf.FileName))
iUploadedCnt = iUploadedCnt + 1
End If
End If
Next
If Val(iUploadedCnt) > 0 Then
Return iUploadedCnt & " Files Uploaded Successfully"
Else
Return "Upload Failed"
End If
End Function
End Class
End NamespaceThe controller has a public function called UploadFiles(), which is called by the Ajax using a POST request. The function returns a string value, as a confirmation, saying if the loaded or has failed.
HtmlFileCollection Class
In the beginning of this article, I have mentioned about the first article that I have written before, about file upload control in Asp.Net’s version 2.0. The reason I mentioned, since I am using the HtmlFileCollection class, introduced in the version with System.io namespace. It provides the necessary methods to get details about files uploaded by a client application. Details such as name of the file, size etc. This class is important.
Finally, add an HTML page to your project. Here, we will add an HTML5 <input> box with type file, with multiple attribute. In-addition we need to add the jQuery script to make an Ajax POST request to the API.
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload with HTML5, Ajax and Web API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<form action="">
Select Your Files:
<input type="file" id="file" name="file" multiple />
<input id="btUpload" type="button" value="Upload File"/>
<p></p>
</form>
</body>
<script>
$(document).ready(function () {
$("#btUpload").click(function () {
var data = new FormData($('form')[0]);
$.ajax({
type: "POST",
url: '/api/fileupload/', // CALL WEB API TO SAVE THE FILES.
enctype: 'multipart/form-data',
contentType: false,
processData: false, // PREVENT AUTOMATIC DATA PROCESSING.
cache: false,
data: data, // DATA OR FILES IN THIS CONTEXT.
success: function (data, textStatus, xhr) {
$('p').text(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + ': ' + errorThrown);
}
});
});
});
</script>
</html>In the markup section, I have added the file upload control and a button inside the <form> tag. Later, in the script, I am extracting details in the <form> by using the FormData object.
Ref: Learn more about FormData objects
var formData = new FormData(someFormElement);
To understand jQuery events such "contentType" and "processData", I would ask to you read the article here. Particularly read detail with the header Sending Data to the Server. Both events have a value set as "false".