Playground Sunshine Inc.

Plupload is another JQuery plugin for multiple files upload that employs various runtime including gears, flash, silverlight, browserplus and html5 to performs the file upload process.  In this post i will show everyone on how to integrate this plugin into ASP.NET + some tweak to existing plugin to reset the interface..

Things you needed :

1. jQuery 1.4 ++
2. plupload.full.js
3. jquery.plupload.queue.js
4. jquery.plupload.queue.css

Note: all the plugin resources and script can be download from here

Alright let’s start with the copy and paste code (add an aspx page into you project, and follow the instruction below):
The Head….

    <link href="assets/css/jquery.plupload.queue.css" rel="stylesheet" type="text/css" />
    <script src="assets/js/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="assets/js/plupload.full.js" type="text/javascript"></script>
    <script src="assets/js/jquery.plupload.queue.js" type="text/javascript"></script>

The Script….

        $(function () {
            $("#uploader").pluploadQueue({
                // General settings,silverlight,browserplus,html5gears,
                runtimes: 'gears,flash,silverlight,browserplus,html5',
                url: 'FileUpload.ashx',
                max_file_size: '10mb',
                chunk_size: '1mb',
                unique_names: true,

                // Specify what files to browse for
                /*filters: [
                { title: "Image files", extensions: "jpg,gif,png" },
                { title: "Zip files", extensions: "zip" }
                ],*/

                // Flash settings
                flash_swf_url: 'assets/resources/plupload.flash.swf',

                // Silverlight settings
                silverlight_xap_url: 'assets/resources/plupload.silverlight.xap',

                init: {
                    FileUploaded: function (up, file, info) {

                    }
                }
            });

            // Client side form validation
            $('form').submit(function (e) {
                var uploader = $('#uploader').pluploadQueue();

                // Validate number of uploaded files
                if (uploader.total.uploaded == 0) {
                    // Files in queue upload them first
                    if (uploader.files.length > 0) {
                        // When all files are uploaded submit form
                        uploader.bind('UploadProgress', function () {
                            if (uploader.total.uploaded == uploader.files.length)
                                $('form').submit();
                        });

                        uploader.start();
                    } else
                        alert('You must at least upload one file.');

                    e.preventDefault();
                }
            });

            //tweak to reset the interface for new file upload, the core API didn't provide this functionality
            $('#btnReset').click(function () {
                var uploader = $('#uploader').pluploadQueue();

                //clear files object
                uploader.files.length = 0;

                $('div.plupload_buttons').css('display', 'block');
                $('span.plupload_upload_status').html('');
                $('span.plupload_upload_status').css('display', 'none');
                $('a.plupload_start').addClass('plupload_disabled');
                //resetting the flash container css property
                $('.flash').css({
                    position: 'absolute', top: '292px',
                    background: 'none repeat scroll 0% 0% transparent',
                    width: '77px',
                    height: '22px',
                    left: '16px'
                });
                //clear the upload list
                $('#uploader_filelist li').each(function (idx, val) {
                    $(val).remove();
                });
            });
        });

The Body….

    <input id="btnReset" type="button" value="New Upload" />
    <div id="uploader">
        <p>
            You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
    </div>

The Code (HttpPostedFile Handler), Add ASP.NET Generic Handler File (.ashx)
Note : use this if you are using HttpPostedFile Functionality

<%@ WebHandler Language="VB" Class="FileUpload" %>

Imports System
Imports System.Web

Public Class FileUpload : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        If context.Request.Files.Count > 0 Then

            For a As Integer = 0 To context.Request.Files.Count - 1
                Dim file As HttpPostedFile = context.Request.Files(a)
                file.SaveAs(context.Server.MapPath("upload/" & file.FileName))
            Next
        End If

    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

The Code (FTP Upload Handler), Add ASP.NET Generic Handler File (.ashx)
Note: Use this if you are using FTP File Upload Functionality

<%@ WebHandler Language="VB" Class="FileFTPUpload" %>

Imports System
Imports System.Web
Imports System.Net
Imports System.IO

Public Class FileFTPUpload : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        If context.Request.Files.Count > 0 Then

            For a As Integer = 0 To context.Request.Files.Count - 1
                Dim clsRequest As System.Net.FtpWebRequest = _
                    DirectCast(System.Net.WebRequest.Create(
                            "ftp://ftphost/" & context.Request.Files(a).FileName),
                            System.Net.FtpWebRequest)
                clsRequest.Credentials = New System.Net.NetworkCredential("ftpuser", "ftppass")
                clsRequest.Method = System.Net.WebRequestMethods.Ftp.UploadFile

                Dim streamReader As Stream = context.Request.Files(a).InputStream
                Dim bFile(streamReader.Length) As Byte

                streamReader.Read(bFile, 0, streamReader.Length)
                streamReader.Close()
                streamReader.Dispose()

                Dim clsStream As System.IO.Stream = _
                    clsRequest.GetRequestStream()
                clsStream.Write(bFile, 0, bFile.Length)
                clsStream.Close()
                clsStream.Dispose()
            Next
        End If

    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

Alright it’s done… you can copy and paste the source code above or simply download the entire source code here and tested it… Happy programming

Share your thoughts