Subjects

Subjects / Keywords:

SobekCM

Notes

Abstract:

Article includes demonstration on how to implement multiple file uploads with real-time progress bars within an ASP.net solution using the Uploadify libraries. The HttpHandler class developed herein should easily plug and play into any ASP.net application, along with the provided ASP.net control or class, making this useful as plug-in-play code as well as a demonstration of how to program the HttpHandler. In addition, shows added additional features in the ASP.net layer, including file extension filtering, post-back upon completion, and session-based security.

Record Information

Source Institution:

University of Florida

Holding Location:

University of Florida

Rights Management:

Applicable rights reserved.

System ID:

IR00003613:00001

This item is only available as the following downloads:

Additional Form Note : The document below is by Mark V. Sullivan Dec. 15, 2013 The document was originally posted and remains online with the code documentation: http://ufdc.ufl.edu/ sobekcm/development/upload I NTRODUCTION In this article I will demonstrate how to implement multiple file uploads with real time progress bars within an ASP.net solution using the Uploadify libraries. The HttpHandler class developed herein should easily plug and play into any ASP.net application, along with the provided ASP.net control or class, making this useful as plug in play code as well as a demonstration of how to program the HttpHandler. In addition, I have added additional features in the ASP.net layer, including file extension filtering, post back upon completion, and session based security. B ACKGROUND With HTML5 came the promise of handling the upload of multiple files simultaneously without the use of ActiveX or other plug ins. But plai n HTML5 does not support real progress bars during the upload and is handled somewhat differently by each browser. And I needed a secure solution which allowed for file extension filtering. In search of a solution to replace my older solution, I found Uplo adify. Apprarently this library was originally written as a Flash plug in, but a HTML5 solution was released in 2012. The Flash library is free. Regrettably, the HTML5 library comes at a small fee, either $5 or $100 if you wish to distribute the library. U ltimately, I decided it was a small cost for what appeared to be a quality product, but each of you will have to make that determination. I did implement the Flash version in the code included in case it was useful for others. And maybe it will be useful f or older browsers in my projects. Also unfortunately, there were no clear examples online of implementing this solution within an ASP.net project.

PAGE 2

In this solution, I have wrapped the options within both a C# class (for writing directly to an output stream without controls) and also a C# web control. The classes handle most of the options which the library can handle. In addition, I added javascrip t support for filtering the upload files client side and server side. The security aspects (and server side file filtering) require the use of the session state, but help to prevent unwanted uploads. Other options necessary for my project are also added to the C# classes/controls. U SING THE CODE Before you get started Before using the included code as is, you should choose either the free Flash version or the HTML5 library. The entire contents of the Flash version should be placed in the empty Uploadify sub folder whereas the contents of the HTML5 version should be placed in the empty UploadiFive subfolder. The Flash version is utilized for the third demo (Demo3.aspx) and the HTML5 version is utilized for the first two demos. Referencing libraries You will n eed to add references to the required jQuery library and the Uploadify library chosen. A standard css file comes with the packages, so I have referenced that as well in my code. Add the following lines in the head of your ASPX form. or < script src="jquery/jquery 1.10.2.js" type="text/javascript">

PAGE 3

Adding the control to your page Fo r ASP.net web forms, you can add this control to your page by instantiating the UploadiFiveControl class code and adding it to the form or placeholder. // Get the save path string savepath = Context.Server.MapPath("files"); // Create the upload control an d add to the form UploadiFiveControl uploadControl = new UploadiFiveControl { UploadPath = savepath, RemoveCompleted = true, SubmitWhenQueueCompletes = true, AllowedFileExtensions = ".jpg|.bmp" }; form1.Controls.Add(uploadControl); Adding the control in MVC should work analagously. Utilizing the Flash version is quite simple, as the same control and classes are utilized, but the version flag is set to Flash, rather than the default. All other changes, including the name change for some of the options, are handled by the control. // Create the upload control and add to the form UploadiFiveControl uploadControl = new UploadiFiveControl { UploadPath = savepath, RemoveCompleted = true, SubmitWhenQueueCompletes = true, AllowedFileExtensions = ".jpg|.bmp", Version = UploadiFive_Version_Enum.Flash }; form1.Controls.Add(uploadControl); HttpHandler for the uploaded files You will also need to add the UploadiFiveFileHandler HttpHandler into your project. This handles the files as they are uploaded onto your server. This is the portion of the implementation which was least covered in any help pages or blog posts, so it is fully explored in the next section. To include this class, just copy the UploadiFiveFileHandler.ashx an d UploadiFiveFileHandler.ashx.cs into your project. S ECURITY AND THE H TTP H ANDLER Creating the HttpHandler is fairly straightforward, but providing for flexibility and adding security makes it slightly more complicated. This implementation utilized the sess ion state to provide security and pass information from the uploading page to the handler.

PAGE 4

For this purpose, the UploadiFive_Security_Token class is utilized. This class is quite simple and the declaration appears below: /// Token used to add sec urity, via adding a key to the session /// state, for uploading documents through this system public class UploadiFive_Security_Token { /// Path where the uploaded files should go public readonly string UploadPath; /// List of file extensions allowed public readonly string AllowedFileExtensions; /// Name of the file object to use in your server side script public readonly string FileObjName; /// The GUID fo r this security token public readonly Guid ThisGuid; /// Constructor for a new instance of the UploadiFive_Security_Token class /// Path where the uploaded files should go /// List of file extensions allowed /// Name of file object to use in your server side script public UploadiFive_Security_Token(string UploadPath, string AllowedFileExtensions, string FileObjName ) { this.UploadPath = UploadPath; this.AllowedFileExtensions = AllowedFileExtensions; this.FileObjName = FileObjName; ThisGuid = Guid.NewGuid(); } } As you can see, this class holds the path where the file should be s aved, the allowable file extensions, and the key under which the file will be found by the handler. When the UploadiFiveControl class is rendered, it creates a new security token and stores it in the session state under the GUID. Additionally, it adds it t o FormData dictionary, so that it is passed to the Uploadify library, and in turn passed back to the handler with the file data. // Create a new security token with all the configuration info UploadiFive_Security_Token newToken = new UploadiFive_Security_Token(UploadPath, AllowedFileExtensions, FileObjName); // Add this token to the current session for the HttpHandler HttpContext.Current.Session["#UPLOADIFIVE::" + newToken.ThisGuid.ToString()] = newToken; // Save the token into t he formdata so comes to the HttpHandler

PAGE 5

FormData["token"] = newToken.ThisGuid.ToString(); The form data is included in the javascript to create the Uploadify control. Below is a sample of the resultant HTML, without any file extension restrictions: As you can see above, the GUID generated by the security token is included in the javascript to initialize the library. The HttpHandler needs access to the session state, so it needs to implement the IReadOnlySessionState interface. Below is the complete code of the ProcessRequest method of the handler, without any of the file extension restriction code: Context.Response.ContentType = "text/plain"; Context.Response.Expires = 1; // Try to get the security token key string tokenKey = Context.Request["token"]; if (tokenKey == null) { Context.Response.Write("No token provided with this request"); Context.Response.StatusCode = 401; return; } // Try to get the matching token object from the session UploadiFive_Security_Token tokenObj = Context.Session["#UPLOADIFIVE::" + tokenKey] a s UploadiFive_Security_Token; if (tokenObj == null) { Context.Response.Write("No matching server side token found for this request"); Context.Response.StatusCode = 401; return; } try { // Get the posted file from the appropriate file key HttpPostedF ile postedFile = Context.Request.Files[ tokenObj.FileObjName ];