Multiple File Upload For ASP.NET With Progressbar & Client Side Image Resizing

Nasir Razzaq
CERTIFIED EXPERT
Published:
Uploader

Introduction

This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks.

Background

I had to provide a way for users to upload a lot of pictures. The problem was that pictures were being taken with 12-16 mega pixel cameras at 4000x3000 resolution so the picture files were huge(>5MB). This made it prohibitive because it would take ages to upload even 50 pictures for server side processing hence I had to find a way of resizing the images on the client BEFORE upload to the server. In my search, I came across the open source plupload control which provides a brilliant upload functionality with progress update and client side resizing. The only problem was that all the samples were in PHP, so it took me some effort to get it working with ASP.NET. I am writing this article to help others who want to use this control in ASP.NET.


Using the Code

The control can be downloaded from http://www.plupload.com/index.php.

Once you unzip the contents to your project folder, you would need to provide two pages. One page needs to be an ASP.NET page while the other one can be either ASP.NET or simple HTML.

Here is the markup of the page that hosts the upload control:


 
<%@ Page Language="vb" AutoEventWireup="false"
                      CodeBehind="UploadToCRM.aspx.vb" Inherits="ImageUploader.UploadToCRM" %>
                      
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      <head runat="server">
                          <title>Upload files to CRM</title>
                          <link rel="stylesheet"
                          href="js/jquery.plupload.queue/css/jquery.plupload.queue.css"
                          type="text/css" media="screen" />
                      
                      <script type="text/javascript"
                      src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
                      <script type="text/javascript"
                      src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
                      
                      <script type="text/javascript" src="js/plupload.js"></script>
                      <script type="text/javascript" src="js/plupload.flash.js"></script>
                      <script type="text/javascript"
                      src="js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
                      
                          <style type="text/css">
                              #btnSubmit
                              {
                                  width: 92px;
                              }
                          </style>
                      
                      </head>
                      <body>
                          <form id="form1" runat="server">
                          <table>
                           <tr>
                            <td colspan="2">
                               <h3>Upload Files To CRM</h3>
                            </td>
                           </tr>
                           <tr>
                            <td colspan="2">
                             <br />
                         	    <div style="float: left; margin-right: 20px">
                      		 <div id="flash_uploader" style="width: 450px;
                      		 height: 330px;">Your browser doesn't have Flash installed.</div>
                      	     </div>
                               <br style="clear: both" />
                            </td>
                           </tr>
                           <tr>
                            <td colspan="2">
                             <asp:Button id="btnSubmit" runat="server" Text="Save" Enabled="false" />
                                <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
                            </td>
                           </tr>
                          </table>
                          </form>
                          <script type="text/javascript">
                              $(function () {
                                  // Setup flash version
                                  $("#flash_uploader").pluploadQueue({
                                      // General settings
                                      runtimes: 'flash',
                                      url: 'upload.aspx',
                                      max_file_size: '10mb',
                                      chunk_size: '1mb',
                                      unique_names: true,
                                      filters: [
                      			{ title: "Image files", extensions: "jpg" }
                      		],
                      
                                      // Resize images on clientside if we can
                                      resize: { width: 800, height: 600, quality: 90 },
                      
                                      // Flash settings
                                      flash_swf_url: 'js/plupload.flash.swf',
                      
                                      init: { StateChanged: function (up) {
                                          // Called when the state of the queue is changed
                                          if (up.state == plupload.STOPPED) {
                                              $("#btnSubmit").removeAttr("disabled");
                                          }
                                      }
                                      }
                                  });
                              });
                      
                          </script>
                      </body>
                      </html>

Open in new window



You need to make sure that the paths of other files being referenced in the markup are correct. For example, "flash_swf_url: 'js/plupload.flash.swf'," needs to point to the correct location of the swf file. Also, "url: 'upload.aspx'" is the address of the page which receives the uploaded files. I have a page called "upload.aspx" in the same directory as the above page so I simply provided the relative path of the page.

The upload is performed by posting the files in chunks to the upload.aspx page. There is no special markup in the page, but the code behind looks like below:


 
Public Class upload
                          Inherits System.Web.UI.Page
                      
                          Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
                      	Handles Me.Load
                              If IsNothing(Request.Form("chunk")) = False Then
                                  If Session("ID") Is Nothing Then
                                      Session("ID") = Guid.NewGuid.ToString
                                      IO.Directory.CreateDirectory(Server.MapPath("Uploads/" & Session("ID")))
                                  End If
                                  Dim chunk As Integer = Request.Form("chunk")
                                  Dim chunks As Integer = Request.Form("chunks")
                                  Dim filename As String = Request.Form("name")
                                  If chunk = 0 Then
                                      Request.Files(0).SaveAs(Server.MapPath("Uploads/") & _
                      		Session("ID") & "/" & Request.Files(0).FileName)
                                  Else
                                      Dim OutputStream As New IO.FileStream(Server.MapPath("Uploads/") & _
                      		Session("ID") & "/" & Request.Files(0).FileName, IO.FileMode.Append)
                                      Dim InputBytes(Request.Files(0).ContentLength) As Byte
                                      Request.Files(0).InputStream.Read(InputBytes, 0, _
                      			Request.Files(0).ContentLength)
                                      OutputStream.Write(InputBytes, 0, InputBytes.Length - 1)
                                      OutputStream.Close()
                                  End If
                              End If
                          End Sub
                      
                      End Class

Open in new window



This page creates the session, and the temporary directory where the uploaded images will be saved. When a file, or a chunk of a file is uploaded, the Request.Form collection contains the current chunk number, number of total chunks, and the name of file. If the chunk is 0 (first chunk), we create the file. If the chunk is greater than 0(chunk of existing file), we append that chunk to the existing file.

Finally, the code behind for the page that is hosting the upload control contains the code for Submit button. In my original page, I have other controls and code to do some database work but I have stripped that code out for this example and kept it simple.


 
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
                          If Session("ID") Is Nothing Then
                              lblMessage.Text = "You don't seem to have uploaded any pictures."
                              Exit Sub
                          Else
                              Dim FileCount As Integer = Request.Form(Request.Form.Count - 2)
                              Dim FileName, TargetName As String
                              Try
                                  Dim Path As String = "\\servername\foldername\"
                                  Dim StartIndex As Integer
                                  Dim PicCount As Integer
                                  For i As Integer = 0 To Request.Form.Count - 1
                                      If Request.Form(i).ToLower.Contains("jpg") Then
                                          StartIndex = i + 1
                                          Exit For
                                      End If
                                  Next
                                  For i As Integer = StartIndex To Request.Form.Count - 4 Step 3
                                      FileName = Request.Form(i)
                                      If IO.File.Exists(Path & FileName) Then
                                          TargetName = Path & FileName
                                          Dim j As Integer = 1
                                          While IO.File.Exists(TargetName)
                                              TargetName = Path & _
                      			IO.Path.GetFileNameWithoutExtension(FileName) & "(" & j & ")"_
                      			 & IO.Path.GetExtension(FileName)
                                              j += 1
                                          End While
                                      Else
                                          TargetName = Path & FileName
                                      End If
                                      IO.File.Move(Server.MapPath("Uploads/" & Session("ID") & "/" _
                      			& FileName), TargetName)
                                      PicCount += 1
                                  Next
                                  lblMessage.Text = PicCount & IIf(PicCount = 1, " Picture", _
                      			" Pictures") & " Saved!"
                                  lblMessage.ForeColor = Drawing.Color.Black
                              Catch ex As Exception
                                  lblMessage.Text = ex.ToString
                      	    End Try
                          End If
                      End Sub

Open in new window




When the submit button is clicked, details of all the uploaded files are sent in the Request.Form collection. The code then loops through this collection to process each file and move it from the temporary folder to a share on a server.

Note

This example only deals with the Flash runtime of the plupload control. The control also provides Silverlight, Google Gears, Browser Plus, HTML5, and HTML4 runtimes but those are beyond the scope of this article.
0
12,281 Views
Nasir Razzaq
CERTIFIED EXPERT

Comments (2)

Commented:
thank you is work with me
CERTIFIED EXPERT
Most Valuable Expert 2012
Top Expert 2014

Author

Commented:
Glad it did.

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.