Multiple File Upload into a Database with Progress Bar and Drag and Drop





5.00/5 (21 votes)
The ASP.NET pages let you upload, delete and browse files into a database.
Introduction
This ASP.NET application will let you upload multiple files to a SQL Server database via drag and drop. It will show progress bar for each file as it uploads. Once uploaded, you can browse, sort and delete these files.
Background
This is a sequel to my earlier article, Multiple file upload with progress bar and drag and drop.
Using the Code
To use this application:
- Download Upload.zip and unzip it to C:\inetpub\wwwroot\Upload.
- Open SQL Server Management Studio and create "
Upload
" database. Make sure that SQL Server uses SQL Authentication mode. - In Notepad, open "C:\inetpub\wwwroot\Upload\Web.config" and update user name and password needed to connect to the database:
- Point your browser to http://localhost/Upload/Upload.aspx.
Here is the code for Upload.js:
var oUploadedFiles = []; function OnLoad() { if (_("tbServer"))_("btnDelete").style.display = ""; if (_("file1").addEventListener) _("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 FileSelectHandler(e) { FileDragHover(e); var oFiles = e.target.files || e.dataTransfer.files; if (oFiles.length==0) return; var sHtml = "<table id='tbClient' class='StatusTable' border=1 cellspacing=0 cellpadding=3><tr>" + "<th><a href='?sort=FileName'>File name</a></th>" + "<th><a href='?sort=FileSize'>Size</a></th>" + "<th><a href='?sort=DateCreated'>Date Modified</a></th>" + "<th><label><input type=checkbox name=chkDeleteAll onclick='DeleteAll(this)'>Delete</label></th></tr>"; for (var i=0; i<oFiles.length; i++){ sHtml += GetRowHtml(oFiles[i].name, oFiles[i].size, i + "", ""); } for (var i=0; i<oUploadedFiles.length; i++){ sHtml += GetRowHtml(oUploadedFiles[i].name, oUploadedFiles[i].size, "", oUploadedFiles[i].fileId); } var sServerHtml = ""; if (_("tbServer")){ _("trHeader").style.display = "none"; _("tbServer").style.display = "none"; sServerHtml = _("tbServer").innerHTML; } _("divStatus").innerHTML = sHtml + sServerHtml + "</table>"; for (var i=0; i<oFiles.length; i++){ UploadFile(oFiles[i],i); } } function GetRowHtml(sName, iSize, i, iFileId) { var sHref = ""; if (iFileId != "") sHref = " href='Download.aspx?id=" + iFileId + "' "; var s = "<tr><td><a id=fileLink" + i + " target='_blank'" + sHref + ">" + sName + "</a></td>" + "<td>" + (iSize/1024).formatNumber(0,',','.') + " KB</td>" if (i==""){ s += "<td><div class='progressBar progressSuccess'> </div></td>"; }else{ s += "<td id=progressBar"+i+"></td>"; } return s + "<td><input type=checkbox name=chkDelete value=\"" + sName + "\"></td></tr>"; } 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) { if (xhr.responseText == "") { oUploadedFiles.push({ fileId: 0, name: file.name, size: file.size }); alert("ccc"); } else { eval(xhr.responseText); var iFileId = oUploadedFiles[oUploadedFiles.length - 1].fileId; _("fileLink" + i).href = "Download.aspx?id=" + iFileId; } _("btnDelete").style.display = "" } else { _("divError").innerHTML = xhr.responseText; } } }; var oFormData = new FormData(); oFormData.append("myfile"+i, file); xhr.open("POST", _("form1").action, true); xhr.send(oFormData); } } function DeleteAll(o){ var oBoxes = document.getElementsByTagName("input"); for (var i=1; i<oBoxes.length; i++){ oBoxes[i].checked = o.checked; } } function _(id) { return document.getElementById(id); } Number.prototype.formatNumber = function(decPlaces, thouSeparator, decSeparator) { var n = this, decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces, decSeparator = decSeparator == undefined ? "." : decSeparator, thouSeparator = thouSeparator == undefined ? "," : thouSeparator, sign = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "", j = (j = i.length) > 3 ? j % 3 : 0; return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : ""); };
Here is the code for Upload.aspx.vb:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Request.HttpMethod = "POST" Then Dim cn As New System.Data.SqlClient.SqlConnection(GetConnectionString()) cn.Open() 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 sFileId As String = Request.Form.GetValues("chkDelete")(i) Try Dim cm As New SqlCommand("delete AppFile where FileId = @FileId", cn) cm.Parameters.Add("@FileId", Data.SqlDbType.Int).Value = sFileId cm.ExecuteNonQuery() Catch ex As Exception 'Ignore error End Try Next End If Else Dim sJson As String = "" '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) If sFileName <> "" Then Dim iFileSize As Integer = oFile.ContentLength Dim oData(iFileSize) As Byte Dim oStream As System.IO.Stream = oFile.InputStream oStream.Read(oData, 0, iFileSize) oStream.Close() Dim sSql As String = "INSERT INTO AppFile _ (FileData, FileName, FileContentType, FileSize) " & _ " Values(@FileData, @FileName, @FileContentType, @FileSize); _ SELECT @@IDENTITY" Dim cm As New SqlCommand(sSql, cn) cm.Parameters.Add("@FileData", _ Data.SqlDbType.Binary, iFileSize).Value = oData cm.Parameters.Add("@FileName", Data.SqlDbType.NVarChar).Value = sFileName cm.Parameters.Add("@FileContentType", Data.SqlDbType.NVarChar).Value = _ oFile.ContentType cm.Parameters.Add("@FileSize", Data.SqlDbType.Int).Value = iFileSize Dim sFileId As String = cm.ExecuteScalar() sJson += "oUploadedFiles.push({fileId: " & sFileId & ", _ name: """ & sFileName & """, size: " & iFileSize & "});" End If Next If Request.Form("btnUpload") = "" Then Response.Write(sJson) Response.End() End If End If cn.Close() End If SetupDatabase() End Sub Private Sub SetupDatabase() Dim cn As New System.Data.SqlClient.SqlConnection(GetConnectionString()) cn.Open() Dim cm As New SqlCommand("select count(*) from INFORMATION_SCHEMA.TABLES _ where TABLE_NAME = 'AppFile'", cn) If cm.ExecuteScalar() = "1" Then 'Table already exists cn.Close() Exit Sub End If Dim sSql As String = System.Configuration.ConfigurationManager.AppSettings("TableCreate") cm = New SqlCommand(sSql, cn) cm.ExecuteNonQuery() cn.Close() End Sub Public Sub ShowFiles() Dim sSql As String = "SELECT FileId, FileName, FileSize, DateCreated from AppFile" Dim sSort As String = Request.QueryString("sort") & "" If sSort = "FileName" OrElse sSort = "FileSize" OrElse sSort = "DateCreated" Then sSql += " ORDER BY " & sSort End If Dim cn As New SqlConnection(GetConnectionString()) cn.Open() Dim ad As SqlDataAdapter = New SqlDataAdapter(sSql, cn) Dim ds As Data.DataSet = New Data.DataSet ad.Fill(ds) cn.Close() Dim oTable As Data.DataTable = ds.Tables(0) If oTable.Rows.Count = 0 Then Exit Sub End If Response.Write("<table id='tbServer' _ class='StatusTable' border=1 cellspacing=0 cellpadding=3>") Response.Write("<tr id=trHeader>") Response.Write("<th><a href='?sort=FileName'>File name</a></th>") Response.Write("<th><a href='?sort=FileSize'>Size</a></th>") Response.Write("<th><a href='?sort=DateCreated'>Date Modified</a></th>") Response.Write("<th><label><input type=checkbox name=chkDeleteAll _ onclick='DeleteAll(this)'>Delete</label></th></tr>") For i As Integer = 0 To oTable.Rows.Count - 1 Dim sFileId As String = oTable.Rows(i)("FileId") Dim sFileName As String = oTable.Rows(i)("FileName") Dim iFileSize As Integer = oTable.Rows(i)("FileSize") Dim dDateCreated As DateTime = oTable.Rows(i)("DateCreated") Dim sSize As String = FormatNumber((iFileSize / 1024), 0) If sSize = "0" AndAlso iFileSize > 0 Then sSize = "1" Response.Write("<tr>") Response.Write("<td><a href=""Download.aspx?id=" & sFileId & _ """ target='_blank'>" & sFileName + "</a></td>") Response.Write("<td>" & sSize & " KB</td>") Response.Write("<td>" & dDateCreated.ToShortDateString() & _ " " & dDateCreated.ToShortTimeString() & "</td>") Response.Write("<td><input type=checkbox name=chkDelete _ value=""" & sFileId & """>") Response.Write("</tr>") Next Response.Write("</table>") End Sub Private Function GetConnectionString() As String Return System.Configuration.ConfigurationManager.AppSettings("ConnectionString") End Function
History
- 11th October, 2016: Initial version