Click here to Skip to main content
14,602,723 members

Multiple File Upload with Progress Bar and Drag and Drop

Rate this:
4.66 (28 votes)
Please Sign up or sign in to vote.
4.66 (28 votes)
20 Feb 2019CPOL
The ASP.NET pages let you upload, delete and browse files in a folder.

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.

Image 1

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.

    Image 2

  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

  • 14th September, 2014: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Igor Krupitsky
Web Developer
United States United States
Igor is a business intelligence consultant working in Tampa, Florida. He has a BS in Finance from University of South Carolina and Masters in Information Management System from University of South Florida. He also has following professional certifications: MCSD, MCDBA, MCAD.

Comments and Discussions

 
GeneralMy vote of 5 Pin
William Costa Rodrigues30-Sep-19 19:39
MemberWilliam Costa Rodrigues30-Sep-19 19:39 
QuestionList of files does not always refresh when using System.IO.Directory.GetFiles to use a protected server path, Pin
kiamori6-Feb-17 15:50
Memberkiamori6-Feb-17 15:50 
Questionmaximum file size problem Pin
dermassen28-Jul-16 4:27
Memberdermassen28-Jul-16 4:27 
AnswerRe: maximum file size problem Pin
dermassen28-Jul-16 5:16
Memberdermassen28-Jul-16 5:16 
QuestionSave Images DB Pin
vime10710-Oct-15 18:44
Membervime10710-Oct-15 18:44 
AnswerRe: Save Images DB Pin
Igor Krupitsky12-Oct-15 22:00
mvaIgor Krupitsky12-Oct-15 22:00 
QuestionIe11 also does not support this? Pin
senthilnoah8-Oct-15 6:23
Membersenthilnoah8-Oct-15 6:23 
AnswerRe: Ie11 also does not support this? Pin
Igor Krupitsky9-Oct-15 19:10
mvaIgor Krupitsky9-Oct-15 19:10 
BugFile drop here functionality is not running in internet explorer 11? Pin
Girish Nama3-May-15 19:02
MemberGirish Nama3-May-15 19:02 
GeneralRe: File drop here functionality is not running in internet explorer 11? Pin
Igor Krupitsky9-Oct-15 19:10
mvaIgor Krupitsky9-Oct-15 19:10 
GeneralSuper Easy! Pin
Rohant Kunnat28-Mar-15 21:00
MemberRohant Kunnat28-Mar-15 21:00 
QuestionMultiple file upload Pin
vadmin23-Mar-15 14:20
Membervadmin23-Mar-15 14:20 
QuestionCan we convert this code into user control or such a control for file upload Pin
ss9o9o9o11-Mar-15 0:25
Memberss9o9o9o11-Mar-15 0:25 
AnswerRe: Can we convert this code into user control or such a control for file upload Pin
Igor Krupitsky13-Mar-15 23:04
mvaIgor Krupitsky13-Mar-15 23:04 
NP
QuestionCan't get to the code on Code Project site. Have you removed it? Pin
Member 456347516-Feb-15 13:24
MemberMember 456347516-Feb-15 13:24 
AnswerRe: Can't get to the code on Code Project site. Have you removed it? Pin
Igor Krupitsky17-Feb-15 6:06
mvaIgor Krupitsky17-Feb-15 6:06 
QuestionAmazing little thing Pin
KobKob27-Jan-15 16:09
MemberKobKob27-Jan-15 16:09 
AnswerEasy ad Excellent 5 Star Pin
Zaki Ali Gurey7-Dec-14 22:49
MemberZaki Ali Gurey7-Dec-14 22:49 
GeneralMy vote of 5 Pin
Maggie Green27-Oct-14 6:33
professionalMaggie Green27-Oct-14 6:33 
GeneralSimple Effective - 5 Stars Pin
citizendc13-Oct-14 22:37
Membercitizendc13-Oct-14 22:37 
GeneralRe: Simple Effective - 5 Stars Pin
ss9o9o9o11-Mar-15 0:21
Memberss9o9o9o11-Mar-15 0:21 
QuestionBrowsers compatibility Pin
mmuekk2313-Sep-14 23:21
Membermmuekk2313-Sep-14 23:21 
AnswerRe: Browsers compatibility Pin
Igor Krupitsky14-Sep-14 0:20
mvaIgor Krupitsky14-Sep-14 0:20 
AnswerRe: Browsers compatibility Pin
Igor Krupitsky14-Sep-14 0:41
mvaIgor Krupitsky14-Sep-14 0:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 13 Sep 2014

Stats

44K views
2.3K downloads
54 bookmarked