Uploading multiple files to Umbraco with Uploadify

Last week I was working on an Umbraco project which required that the frontend users are able to upload several images to Umbraco. After a good few minutes of googlin’ for a javascript library that could handle this, I ended up fooling around with a library called Uploadify.

Uploadify is described like this:

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Features:

  • jQuery Implementation
  • Multiple File Upload Capabilities
  • SWFObject Integration
  • Compatibility with Popular Server-Side Languages
  • Highly-Customizable
  • Large Support Community
  • Extensive Documentation with Examples”

You can check out live demos of Uploadify here: http://www.uploadify.com/demos/

What I like about Uploadify is that it’s highly customizable with different events, HTML/CSS layout and so on, so forth. The only thing I need is if the users haven’t installed Flash and/or has disabled javascript, it will fail gracefully, but I’m sure it’s possible to write some custom JS code to take care of this.

Setting up Uploadify is quite easy, you just need a regular HTML input like this:


Place the files downloaded from here: http://www.uploadify.com/download/ in your solution

.. and reference it on your UserControl:

Looking at the documentation page (http://www.uploadify.com/documentation/) in the Implementation chapter it’s all described right there and the default way of setting up Uploadify will be:

This causes the queue to automatically start (hence the ‘auto’: true property) uploading the selected picture(s) when selected. Also, notice that Uploadify needs two urls: the uploader .swf file which should be included in the Scripts/uploadify/ folder and a path to the actual upload script. The upload script is the code that actually uploads the file(s) to the server.

While this works out of the box (depending on if your upload script works) I wanted it to start uploading the selected files when the user clicks an Upload button/link. Also, the users should be able to enter a description text to each of the images in the queue before uploading. To do this, I had to modify the HTML in the jquery.uploadify.v2.4.1.js file to add a description field for each of the items in the queue. Scrolling down to about line 134 in the code you’ll find the actual queue HTML output which needs to be changed. I changed it to:

Remember to add a ‘\’ at the end of every line. Since the id needs to be unique I simple gave it the ID of the queueitem.

Next, I set up the Uploadify script like this:

First I create a new array which acts like the queue and set the folder id, which is the root media folder in Umbraco. Next I set the properties to taste – i.e. the queue should not be cleared when upload is finished etc. One of the events you can subscribe to is the onSelect which fires whenever a user selects one or more files. In this case I add the selected item(s) id to the queue array.

Finally, when the user is done selecting files, writing descriptions to each of them and clicks the Upload button, I loop through the items in the queue array and call the uploadifyUpload() method which fires the upload script. Before making a call to the uploadifyUpload() method I chose to pass some settings with the call. In Uploadify you can pass values to the call by adding these to the scriptData property. In my case I would like to know the id of the media root folder to upload the pictures to and also grab the description that the user has entered in the textfield. To get the description for the right queue item I need to find the HTML element, which id is the same as “description + the current queue id”

Let’s take a look at the upload logic. First off, I had to create a new Generic Handler to run the upload logic since this needs to be called for each of the items in the queue.

When creating a new Generic Handler in Visual Studio you get a method called ProcessRequest which takes a HttpContext object as parameter. This context holds all the data needed – the data which I passed to the scriptData above. So I start by fetching the data needed by doing this:

Since this is a regular POST I’m able to fetch the values from context.Request["postValue"]. The HttpPostedFile is the selected file from Uploadify.

Next up, I’m writing the logic for the upload to Umbraco, which looks like this:

And the method for creating the thumbnail:

And basically, that is all there is to it :)  As always, feel free to comment/discuss this.

Thanks for reading!

This entry was posted in ASP.NET, Umbraco CMS. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

10 Comments

  1. Matthew
    Posted March 28, 2011 at 8:24 pm | Permalink

    Great article Bo. We use Uploadify on a large Umbraco implementation and it works great. We also use Jcrop so once the images are uploaded they can be cropped also, makes for a seemless upload process that makes clients happy.

    • Posted March 28, 2011 at 8:56 pm | Permalink

      Hi Matthew,

      Glad you liked it :-) I’ve also used JCrop for an Umbraco solution before and it sure feels intuitive and easy for the end-user to grasp! Might aswell write a new post about using JCrop for cropping images from Umbraco on the frontend!

  2. Posted March 29, 2011 at 6:24 pm | Permalink

    Hi,

    A while back, we built a custom package for Umbraco that uses Uploadify for both front-end and back-end multiple file uploads: http://our.umbraco.org/projects/website-utilities/gecko-uploadify.

    Cheers,
    Emanuel

  3. Posted March 30, 2011 at 10:49 am | Permalink

    Hello,

    Did you also have a look at the Gecko Uploadify (http://our.umbraco.org/projects/website-utilities/gecko-uploadify) package for Umbraco? It also has a macro so the upload functionality can be used on the front-end.

    Jeroen

  4. Posted March 30, 2011 at 3:43 pm | Permalink

    Emanuel and Jeroen: Thanks guys :-) Didn’t know of Gecko uploadify to be honest, but i’ll sure be checking that out for future solutions!

  5. deepfreezed
    Posted May 5, 2011 at 9:39 pm | Permalink

    Gecko Uploadify does not work correctly on Umbraco 4.5+. there is an error when trying to insert the macro onto a page.

  6. david
    Posted June 12, 2011 at 10:59 pm | Permalink

    Hi thanks for excellent article. Could you please be more specific how to link together ashx and Jquery?
    Many thanks.
    David

    • Posted July 22, 2011 at 7:29 pm | Permalink

      Hi David,

      Sorry about the delayed reply, your comment somehow got lost in the wordpress backend.

      Anyway, the way you hook up Uploadify to the generic handler is pretty simple. As my screenshots tell, Uploadify expects a path to the actual upload mechanism/handler. This will be the ‘script’: property when instantiating Uploadify – simply just point this property to your ashx file and you’re all set! :-)

      Hope it make sense, else please let me know!

      All the best,

      Bo

  7. Posted December 21, 2011 at 10:43 am | Permalink

    hej bo,

    Could you please guide me – im using an hosted server, so the mediaRootPath is, i guess, something else?

    Maybe /media/ but i can’t get it to work.

    Other then that – great tutorial – i learn a lot from them,

  8. Posted December 21, 2011 at 12:31 pm | Permalink

    How should i come about this?

    I would like to create a Document based on input from a user, and at the same time create a gallery that relates to that particular Document.

    It is fairly simple to create a user control that holds some controls and some logic that saves the input to umbraco.

    But when i wan’t to create a gallery, using Uploadify, I don’t know how to relate the document to the gallery.

    I think i would have to create a property for my DocumentType that holds the value of a folderId. Is that correct? and then, how to i get the folderId into my property?

    Best regards
    Klaus

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


eight - 3 =