ASP.NET Multiple File Uploader

• Download source - 4.4 KB

Introduction

This tip tells you how to create a multiple file uploader for ASP.NET with jQuery.

Background

When it comes to uploading different files from different folder locations, existing file uploader can't do that. In this example, we are going to upload multiple files and send email with attachments.

Using the Code

Maximum number of files are determined by the web.config value.

<add key="uploadfilcount" value="5" />

File contents are accessed from HttpFileCollectoin on Upload button click.

Request.Files

Hidden fields are used to store Maximum uploading file count, Control Index (Index of new control creating) and Uploaded file count.

<asp:HiddenField ID="hdnMaxFile" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="hdnCurrentCtrlIndex" Value="0" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="hdnUploadedFileCount" Value="0" runat="server" ClientIDMode="Static" />

Divs are used for displaying added file information with remove link, total files uploaded and any validation messages.

<div id="dvFileList"></div>
<div id="dvTotalFiles"></div>
<div id="dvMessage"></div>

Some jQuery scripts handle the upload control creation and removal procedure. Basically, the below script creates a new upload control and adds the new file information to the list with file size in kilobytes. I also wired up uploader removal logic as well. When maximum number of files are uploaded, uploader control is set to hidden.

function AddCtlr() {

        var maxFilesCount = $('#hdnMaxFile').val();

        //Add selected file to the list       
        var i = parseInt($('#hdnCurrentCtrlIndex').val());

        var files = $('#fuMultipleFile' + i).get(0).files;
        $("#dvFileList").append("<div class='row' 
        id=filecontainer" + i + ">
	<div class='filename'>" + files[0].name + ' (' + 
	Math.round(files[0].size / 1024) + ' kb)' + 
	"</div> <div class='removelink'><a href='#' 
	onclick=RemoveCtrl(" + i + ");>Remove</a></div>
	</div>");

        //Hide the active control
        $('#fuMultipleFile' + i).attr("style", "display:none");

        // Update uploaded file count
        var uploadedFilesCount = parseInt($('#hdnUploadedFileCount').val());
        uploadedFilesCount = uploadedFilesCount + 1;
        $('#hdnUploadedFileCount').val(uploadedFilesCount);

        //Display File Count
        DisplayFileCount(uploadedFilesCount, maxFilesCount);

        // Increase the control index
        i = i + 1;
        $('#hdnCurrentCtrlIndex').val(i);

        // Create new control 
        if (uploadedFilesCount != maxFilesCount && uploadedFilesCount < maxFilesCount) {

            $('#dvUploadContainer').append("<div id='dvCtrl" + i + "'>
	<input name='fuCtrl" + i + "'" + " 
	id='fuMultipleFile" + i + "'" + 
	" type='file' onchange='AddCtlr();'></div>");
        }
    }

Below is the file remove logic, if the user clicks the "Remove" link, the corresponding file uploader is removed.

function RemoveCtrl(ctrlindexid) {

    // Remove relevant upload control and added file
    $("#fuMultipleFile" + ctrlindexid + "").remove();
    $("#dvCtrl" + ctrlindexid + "").remove();
    $("#filecontainer" + ctrlindexid + "").remove();

    var i = parseInt($('#hdnCurrentCtrlIndex').val());

    var maxFilesCount = parseInt($('#hdnMaxFile').val());
    var uploadedFilesCount = parseInt($('#hdnUploadedFileCount').val());

    // create new controls
    if (uploadedFilesCount == maxFilesCount) {

        $('#dvUploadContainer').append("<div id='dvCtrl" + i + "'>
<input name='fuCtrl" + i + "'" + " id='fuMultipleFile" + i + "'" +
" type='file' onchange='AddCtlr();'></div>");
    }

    // Update the uploaded file count
    uploadedFilesCount = uploadedFilesCount - 1;

    // Display File Count
    DisplayFileCount(uploadedFilesCount, maxFilesCount);

    // Update the uploaded file count
    $('#hdnUploadedFileCount').val(uploadedFilesCount);

}

The below logic displays footer message like "(2 of 5) files are uploaded".

function DisplayFileCount(uploadedFilesCount, maxFilesCount) {
    //Display total files
    $('#dvTotalFiles').empty();
    $('#dvTotalFiles').append("(" + uploadedFilesCount +
    " of " + maxFilesCount + ")" +
" files are uploaded");
    $('#dvMessage').empty();
}

The following logic validates at least a file to be present for uploading.

$('#ibUpload').click(function (e) {

    if ($("#hdnUploadedFileCount").val() == "0") {
        $('#dvMessage').empty();
        $('#dvMessage').append("Please upload at least one file");
        e.preventDefault();
    }
});

Once the Upload button clicks, uploaded file names and files content (stream) are put in to ArrayList, and process file content to make email attachments and send email. Finally, it redirects to "Thank You" page.

Protected Sub ibUpload_Click(sender As Object, e As EventArgs) Handles ibUpload.Click

    Dim UploadedFileList As HttpFileCollection = fuBankStatements.UploadedFiles

    Dim filenamelist As New ArrayList
    Dim filestreamlist As New ArrayList

    Dim currentFileStream As System.IO.Stream

    For i As Integer = 0 To UploadedFileList.Count - 1

        Dim hpf As HttpPostedFile = UploadedFileList(i)

        If hpf.ContentLength > 0 Then

            currentFileStream = hpf.InputStream
            filestreamlist.Add(hpf.InputStream)
            filenamelist.Add(hpf.FileName)

        End If
    Next i

    Me.SendMail(filenamelist, filestreamlist)

    currentFileStream.Close()

    Response.Redirect("Thankyou.aspx", False)

End Sub

The below function reads the ArrayList and turns file contents to attachments. Here, we are not creating any files on disk.

Function SendMail(ByVal attachedFilenameList As ArrayList, ByVal streamList As ArrayList) As Boolean

       Dim message As New MailMessage(ConfigurationManager.AppSettings("FromMail"), _
   ConfigurationManager.AppSettings("ToMail"))
       message.Body = "Please check attachments"
       message.BodyEncoding = System.Text.Encoding.UTF8
       message.IsBodyHtml = True

       message.Subject = "Test Mail"

       message.SubjectEncoding = System.Text.Encoding.UTF8

       If (attachedFilenameList IsNot Nothing And streamList IsNot Nothing) Then

           If (attachedFilenameList.Count > 0) Then

               For i As Integer = 0 To attachedFilenameList.Count - 1

                   If (attachedFilenameList(i) <> String.Empty And streamList(i) IsNot Nothing) Then
                       Dim emailAttachment As New System.Net.Mail.Attachment(DirectCast(streamList(i), _
           System.IO.Stream), attachedFilenameList(i).ToString())
                       message.Attachments.Add(emailAttachment)
                   End If

               Next

           End If
       End If

       Dim mailClient As New SmtpClient(ConfigurationManager.AppSettings("SMTPServer"))
       mailClient.Send(message)
       Return True

   End Function

Points of Interest

In this example, we haven't added any file types, size validations. If you are using any validations, use client side validations instead of server validations. You can get file information by the following scripts. "fuMultipleFile0" is first upload control and other would be fuMultipleFile1, fuMultipleFile2 and so on.

$('#fuMultipleFile0').get(0).files