Uploading Multiple Files using JavaScript Dynamic FileUpload Controls in ASPNet

In this article I will explain with an example, how to upload multiple files by dynamically adding FileUpload controls using JavaScript in ASP.Net using C# and VB.Net.

1. Add FileUpload Controls dynamically using JavaScript.

2. Remove FileUpload Controls dynamically using JavaScript.

HTML Markup

The following HTML Markup consists of:

Form – The form has been specified with enctype=“multipart/form-data” attribute as it is necessary for File Upload operation.

HTML Button – It is used for adding multiple FileUpload controls using JavaScript

The Button has been assigned with a JavaScript onclick event handler.

ASP.Net Button – It is used for uploading files has been assigned with an OnClick event handler.

DIV – For displaying FileUpload controls.

<span>Click to add files</span>  

<br />

</div>

<br/>

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="OnUpload" />

</form>

Adding and Removing FileUpload Controls using JavaScript

AddFileUpload

When Add button is clicked, the AddFileUpload function is called and a DIV has been added for displaying FileUpload controls.

Inside the DIV, a FileUplaod Control and an HTML INPUT Button have been added.

The Button has been assigned with a JavaScript onclick event handler for removing FileUpload control.

RemoveFileUpload

When Remove button is clicked, the FileUpload control of relative button is removed from the DIV.

var counter = 0;

function AddFileUpload()

{

var div = document.createElement('DIV');

div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +

'" type="file" />' +

'<input id="Button' + counter + '" type="button" ' +

'value="Remove" onclick = "RemoveFileUpload(this)" />';

document.getElementById("FileUploadContainer").appendChild(div);

counter++;

}

function RemoveFileUpload(div)

{

document.getElementById("FileUploadContainer").removeChild(div.parentNode);

}

</script>

Namespaces

You will need to import the following namespaces.

using System.IO;

VB.Net

Imports System.IO

Uploading multiple Files

When Upload button is clicked, a check is performed whether the Folder (Directory) exists, if it is not then the Folder (Directory) is created.

Then, a loop is executed over the uploaded Files and one by one each File is saved to the Folder (Directory).

protected void OnUpload(object sender, EventArgs e)

{

for (int i = 0; i < Request.Files.Count; i++)

{

string folderPath = Server.MapPath("~/Files/");

//Check whether Directory (Folder) exists.

if (!Directory.Exists(folderPath))

{

//If Directory (Folder) does not exists. Create it.

Directory.CreateDirectory(folderPath);

}

HttpPostedFile postedFile = Request.Files[i];

if (postedFile.ContentLength > 0)

{

//Save the File to the Directory (Folder).

postedFile.SaveAs(folderPath + Path.GetFileName(postedFile.FileName));

}

VB.Net

Protected Sub OnUpload(ByVal sender As Object, ByVal e As EventArgs)

For i As Integer = 0 To Request.Files.Count - 1

Dim folderPath As String = Server.MapPath("~/Files/")

'Check whether Directory (Folder) exists.

If Not Directory.Exists(folderPath) Then

Directory.CreateDirectory(folderPath)

End If

'If Directory (Folder) does not exists. Create it.

Dim postedFile As HttpPostedFile = Request.Files(i)

If postedFile.ContentLength > 0 Then

'Save the File to the Directory (Folder).

postedFile.SaveAs(folderPath & Path.GetFileName(postedFile.FileName))

End If

End Sub

Web.Config Configuration

You will need to add following properties to the httpRuntime section of the Web.Config file.

executionTimeout – It determines the maximum amount of time in seconds ASP.Net will process the request and after which it will stop the processing. By default the value is 110 seconds.

maxRequestLength – It determines the limit of uploaded file. For example, if the uploaded file size should be up to 10 MB then it must be set to 10240.

<httpRuntime

executionTimeout="110"

maxRequestLength="4096"

requestLengthDiskThreshold="80"

useFullyQualifiedRedirectUrl="false"

minFreeThreads="8"

minLocalRequestFreeThreads="4"

appRequestQueueLimit="5000"

enableKernelOutputCache="true"

enableVersionHeader="true"

requireRootedSaveAsPath="true"

enable="true"