Using Plupload in ASP.NET

Test Solution Download

PLUploadTest.rar (121.28 kb)

I like plupload, however, using it for a real world application was a bit tough my first time around.  I basically wanted to have the user upload a file, then record that record in the database.

So I made a skeleton version of the code that you can use to help get you started. This will allow you to use Plupload in your asp.net application to do the following:

• have the user select a file (or files) via plupload
• Have the user submit a file(s)
• Have a generic handler be aware of the id's of a given object(s) (i.e., a user id)
• Store the file uploaded into a given directory
• The ability to store the id's of an object(s), file id and file name from plupload

To accomplish this you will need the following:

• Plupload
• Custom javascript (not too much) you will see a file named xdev.plupload.js in js/plupload
• Enable Page Methods via the ASP.NET ScripManager

Once you have a skeleton version of the code you like, I think you'll find it easy to modify and incorporate plupload into your project as well. I love this multifile upload, so why not use it effectively in your website application :)

I will bascially do a copy and paste of the ASP.NET code so you can see what's going on.  I think the best thing about this is the ability to take the files and the ID of your object (i.e., user id) that is uploading them and storing the data in a database.

PLUploadTest.aspx

In the "head" part of the aspx page you will need to reference the following javascript and css

    <script type="text/javascript" src="https://www.google.com/jsapi">
    <script type="text/javascript">
        google.load("jquery", "1.3");
    </script>
    <script src="js/plupload/plupload.full.min.js" type="text/javascript">
    <script src="js/plupload/jquery.plupload.queue.min.js" type="text/javascript">
    <script src="js/plupload/xdev.plupload.js" type="text/javascript">
    <link href="plupload.queue.css" rel="stylesheet" type="text/css" />

In the body section of the ASPX page you will need the following:

    <form id="form1" enctype="application/x-www-form-urlencoded" method="get">

        <div id="uploader" style="width: 525px;">
            <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.

        </div>
        <br />     
        <div style="width: 150px; margin-right: 490px;">
            <a onclick="SubmitItem(this)" href="#">Submit Item
        </div>
   
    </form>

PLUploadTest.aspx.cs

[WebMethod]
public static string GetIDs()
{
    //This is strictly here just so you can see how you can grab ID's and make plupload aware of them
    //This is useful for data driven application. Example, you need the ID of the user who is uploading a file
    //so you can pull that data out later when the user logs in.

    //default is pipe delimited for js file in function OnGetIDSucceeded
    //IDOfObject1|IDOfObject2
    string IDs = "0|0";

    //These IDs could be pulled from anywhere (i.e, Session, DB, XML file)

    IDs = string.Format("{0}|{1}", "10", "11"); //"10" and "11" and filler so you can have data to mess around with

    return IDs;
}


[WebMethod]
public static void InsertFileRecord(string idOfObject1, string idOfObject2, string fileID, string fileName)
{
    _InsertAttachment(idOfObject1, idOfObject2, fileID, fileName);
}



private static void _InsertAttachment(string idOfObject1, string idOfObject2, string fileID, string fileName)
{
    //TODO: Insert into Database as needed, or whatever data store you are using.
    string doSomething = ""; //left here for debugging purposes...delete as needed
}

UploadHandler.ashx.cs

public void ProcessRequest(HttpContext context)
{
    //TODO: Whatever you would like to do now that you have the ID's of the objects
    //Example, could be creating directories for that ID specifically, etc....        
    string _idOfObject1 = context.Request.Headers["IDofObject1"].ToString();
    string _idOfObject2 = context.Request.Headers["IDofObject2"].ToString();

    int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
    string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;

    //TODO: change as needed for your application
    string uploadPath = context.Server.MapPath("~/documents/"); 

    HttpPostedFile fileUpload = context.Request.Files[0];

    fileName = fileName.Insert(0, string.Format("{0:MM}{0:dd}{0:yyyy}", DateTime.Now));

    using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
    {
        var buffer = new byte[fileUpload.InputStream.Length];
        fileUpload.InputStream.Read(buffer, 0, buffer.Length);

        fs.Write(buffer, 0, buffer.Length);
    }

}

public bool IsReusable
{
    get { return false; }
}

One of the custom javascript methods that handles the files and data. Please download the zip file to see the entire solution.

function SubmitItem(e) {

    //get a copy of the current uploader
    var uploader = $('#uploader').pluploadQueue();
    var obj = uploader.settings;

    //alert("Local js variable ID1: " + IDofObject);
    //alert("Local js variable ID2: " + IDOfObject2);

    //alert("Header Object1: " + obj.headers.IDofObject1);
    //alert("Header Object2: " + obj.headers.IDofObject2);

    // 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)
                    $('form1').submit();
            });

            //now go insert the files into the DB
            uploader.bind('UploadComplete', function (up, f) {

                var obj = up.settings;

                //alert("Upload Complete");

                for (i = 0; i < f.length; i++) {

                    //alert("Name: " + f[i].name);
                    //alert("ID: " + f[i].id);

                    InsertFileRecord(obj.headers.IDofObject1, obj.headers.IDofObject2, f[i].id, f[i].name);
                }

                alert("File(s) Uploaded"); //You may not want this. I just left it here so you can see how it interacts with everything else.

            });

            uploader.start();
        }
        else {

            alert("No files to upload"); //take out or do whatever you would like here because there were zero files
        }
    }

}

Resources

http://www.plupload.com/
http://www.plupload.com/example_queuewidget.php
http://www.plupload.com/example_custom.php
http://www.plupload.com/example_events.php
http://www.plupload.com/plupload/docs/api/index.html

PLUploadTest.rar (121.28 kb)