Click here to Skip to main content
11,569,265 members (56,359 online)
Click here to Skip to main content

Multiple Fileupload for ASP.NET with Client Side Resizing of Images

, 13 Aug 2011 CPOL 46.9K 5.1K 58
Rate this:
Please Sign up or sign in to vote.
Using plupload control in ASP.NET to upload multiple image files with client side resizing
Article.jpg

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>

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

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

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.

Points of Interest

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.

History

  • 11/08/2011 - 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

Nasir Razzaq
Software Developer (Senior)
Pakistan Pakistan
A VB.NET MVP currently living and working in UK.

You may also be interested in...

Comments and Discussions

 
QuestionCan I disable client resizing? Pin
libaliba2513-May-14 4:27
memberlibaliba2513-May-14 4:27 
Questionc# version Pin
CodeWallah20-Sep-13 12:04
memberCodeWallah20-Sep-13 12:04 
GeneralMy vote of 5 Pin
pen5602-Sep-12 16:52
memberpen5602-Sep-12 16:52 
Questionerror adding in list Pin
ridaria10-May-12 7:49
memberridaria10-May-12 7:49 
AnswerRe: error adding in list Pin
ridaria11-May-12 23:43
memberridaria11-May-12 23:43 
QuestionError Pin
Ashishmau4-May-12 8:18
memberAshishmau4-May-12 8:18 
GeneralError Pin
marcos_care_loco7-Feb-12 5:00
membermarcos_care_loco7-Feb-12 5:00 
GeneralRe: Error Pin
Nasir Razzaq7-Feb-12 8:22
memberNasir Razzaq7-Feb-12 8:22 
GeneralI have Problem Pin
marcos_care_loco7-Feb-12 4:57
membermarcos_care_loco7-Feb-12 4:57 
QuestionSession ID's not retreiving Pin
Kiran Volety12-Oct-11 7:28
memberKiran Volety12-Oct-11 7:28 
AnswerRe: Session ID's not retreiving Pin
Nasir Razzaq14-Oct-11 13:59
memberNasir Razzaq14-Oct-11 13:59 
>Session('id')

this does not mean anything in Javascript. Session is on the server. Try replacing it with <%= Session('id') %>
GeneralRe: Session ID's not retreiving Pin
Kiran Volety14-Oct-11 22:29
memberKiran Volety14-Oct-11 22:29 
QuestionError while saving Pin
Kiran Volety8-Sep-11 8:29
memberKiran Volety8-Sep-11 8:29 
AnswerRe: Error while saving Pin
Nasir Razzaq8-Sep-11 11:14
memberNasir Razzaq8-Sep-11 11:14 
GeneralRe: Error while saving [modified] Pin
Kiran Volety9-Sep-11 10:41
memberKiran Volety9-Sep-11 10:41 
GeneralRe: Error while saving Pin
Nasir Razzaq9-Sep-11 10:56
memberNasir Razzaq9-Sep-11 10:56 
GeneralMy vote of 5 Pin
Аslam Iqbal24-Aug-11 19:33
memberАslam Iqbal24-Aug-11 19:33 
GeneralRe: My vote of 5 Pin
Nasir Razzaq24-Aug-11 22:19
memberNasir Razzaq24-Aug-11 22:19 
QuestionError On IE9 Pin
oremoraj24-Aug-11 8:47
memberoremoraj24-Aug-11 8:47 
AnswerRe: Error On IE9 Pin
Nasir Razzaq25-Aug-11 6:26
memberNasir Razzaq25-Aug-11 6:26 
QuestionAnother 5! Pin
Member 437224216-Aug-11 7:42
memberMember 437224216-Aug-11 7:42 
AnswerRe: Another 5! Pin
Nasir Razzaq16-Aug-11 23:09
memberNasir Razzaq16-Aug-11 23:09 
GeneralMy vote of 5 Pin
alicabas16-Aug-11 1:20
memberalicabas16-Aug-11 1:20 
GeneralRe: My vote of 5 Pin
Nasir Razzaq16-Aug-11 3:06
memberNasir Razzaq16-Aug-11 3:06 
GeneralMy vote of 5 Pin
Aaron @ Autotex Pty Ltd15-Aug-11 16:17
memberAaron @ Autotex Pty Ltd15-Aug-11 16:17 
GeneralRe: My vote of 5 Pin
Nasir Razzaq15-Aug-11 22:49
memberNasir Razzaq15-Aug-11 22:49 
GeneralMy vote of 5 Pin
drewman515014-Aug-11 22:18
memberdrewman515014-Aug-11 22:18 
GeneralRe: My vote of 5 Pin
Nasir Razzaq14-Aug-11 22:23
memberNasir Razzaq14-Aug-11 22:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150624.2 | Last Updated 13 Aug 2011
Article Copyright 2011 by Nasir Razzaq
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid