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