Click here to Skip to main content
15,867,937 members
Articles / Web Development / CSS

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

Rate me:
Please Sign up or sign in to vote.
5.00/5 (22 votes)
20 Feb 2019CPOL 31.1K   715   41   4
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.

Image 1

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:

  1. Download Upload.zip and unzip it to C:\inetpub\wwwroot\Upload.
  2. Open SQL Server Management Studio and create "Upload" database. Make sure that SQL Server uses SQL Authentication mode.

    Image 2

  3. In Notepad, open "C:\inetpub\wwwroot\Upload\Web.config" and update user name and password needed to connect to the database:

    Image 3

  4. Point your browser to http://localhost/Upload/Upload.aspx.

    Here is the code for Upload.js:

    JavaScript
    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'>&nbsp;</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 = "&nbsp;";
    
            // 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:

    VB.NET
    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

License

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


Written By
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

 
QuestionInteresting article, anyway there some issues. Pin
Rock713-Feb-17 6:04
professionalRock713-Feb-17 6:04 
AnswerRe: Interesting article, anyway there some issues. Pin
Phương Võ20-Feb-19 16:00
Phương Võ20-Feb-19 16:00 
PraiseMy vote of 5 Pin
sawq50512-Oct-16 5:26
sawq50512-Oct-16 5:26 

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.