Multiple File Upload with Progress Bar and Drag and Drop

Introduction

This ASP.NET application will let you upload multiple files manually or via drag and drop. It will show progress bar for each file as it uploads. Once uploaded, you can browse and delete these files.

Background

This application is based on the sample provided by Craig Buckler.

Using the Code

To use this application:

1. Download Upload2.zip and unzip it to C:\inetpub\wwwroot\Upload.
2. Give everyone (or the IIS anonymous user) access to C:\inetpub\wwwroot\Upload\upload folder.

   

3. Point your browser to http://localhost/Upload/Upload.aspx?folder=upload.
4. You can change URL from ?folder=upload to your folder like: folder=folder1 if you want to point the page to folder1.

Here is the code for Upload.js:

var oUploadedFiles = [];

function OnLoad() {

	if (_("tbServer"))_("btnDelete").style.display = "";
	
	_("file1").addEventListener("change", FileSelectHandler, false);

	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
		
		var filedrag = _("divDropHere");
		if (filedrag){
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
		}

		_("btnUpload").style.display = "none";
	}
}

function FileDragHover(e) {
	e.stopPropagation();
	e.preventDefault();
	e.target.className = (e.type=="dragover")?"hover":"";
}

function UploadFile(file,i) {
	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
		var progress = _("progressBar"+i).appendChild(document.createElement("div"));
		progress.className = "progressBar";
		progress.innerHTML = " ";

		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = "progressBar " + 
                                     (xhr.status == 200 ? "progressSuccess" : "progressFailed");
				if (xhr.status == 200){
					oUploadedFiles[oUploadedFiles.length] = {name: file.name, size: file.size};
					_("btnDelete").style.display = ""
				}
			}
		};

		var oFormData = new FormData();
		oFormData.append("myfile"+i, file);
		xhr.open("POST", _("form1").action, true);
		xhr.send(oFormData);
	}
}

Here is the code for Upload.aspx.vb:

	Dim sFolder As String = "upload"

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

		If Request.QueryString("folder") <> "" Then
			sFolder = Request.QueryString("folder")
		End If

		Dim sFolderPath As String = Server.MapPath(sFolder)
		If System.IO.Directory.Exists(sFolderPath) = False Then
			Response.Write("Folder does not exist: " & sFolderPath)
			Response.End()
		End If

		If Request.HttpMethod = "POST" Then

			If Request.Form("btnDelete") <> "" Then
				'Delete files
				If (Not Request.Form.GetValues("chkDelete") Is Nothing) Then
					For i As Integer = 0 To Request.Form.GetValues("chkDelete").Length - 1
						Dim sFileName As String = Request.Form.GetValues("chkDelete")(i)

						Try
							System.IO.File.Delete(sFolderPath & "\" & sFileName)
						Catch ex As Exception
							'Ignore error
						End Try
					Next
				End If

			Else
				'Upload Files
				For i As Integer = 0 To Request.Files.Count - 1
					Dim oFile As System.Web.HttpPostedFile = Request.Files(i)
					Dim sFileName As String = System.IO.Path.GetFileName(oFile.FileName)

					oFile.SaveAs(sFolderPath & "\" & sFileName)
				Next
			End If

		End If

    End Sub

History

• 14^th September, 2014: Initial version