Click here to Skip to main content
13,897,154 members
Click here to Skip to main content
Add your own
alternative version

Stats

35.6K views
2.2K downloads
51 bookmarked
Posted 13 Sep 2014
Licenced CPOL

Multiple File Upload with Progress Bar and Drag and Drop

, 20 Feb 2019
Rate this:
Please Sign up or sign in to vote.
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.

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

  • 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.

You may also be interested in...

Pro

Comments and Discussions

 
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
memberIgor 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
memberIgor 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
memberIgor 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
groupss9o9o9o11-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
memberIgor Krupitsky13-Mar-15 23:04 
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
memberIgor 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
groupss9o9o9o11-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
memberIgor Krupitsky14-Sep-14 0:20 
AnswerRe: Browsers compatibility Pin
Igor Krupitsky14-Sep-14 0:41
memberIgor 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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190306.1 | Last Updated 20 Feb 2019
Article Copyright 2014 by Igor Krupitsky
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid