JungleDragon now has a kick-ass upload control

A few weeks ago, I announced a new strategy and feature roadmap for JungleDragon. The first theme to work on is usability. Today I am announcing the first vital feature that improves usability: multi file uploading.

Multi file uploading makes it much easier to contribute images to JungleDragon, as you will see. In this post I will explain this new feature in detail, ending with a video that demonstrates. You can also start using it live on the staging environment.

First, the new upload screen:

We see a button to select images as you would expect. There is also a link to the classic, single file uploader in case Flash (required for the multiuploader) is not available. Then there is a progress bar displaying the user’s upload quota usage (which updates in realtime when we start uploading), and finally some upload guidelines. Let’s select some images:

Nothing fancy to see here, just a file browse dialog that allows you to select multiple images. You can select 20 images per upload batch (a config I have set for now that can be altered), or less if you quota is less than 20 images.

The selected images will be added to a queue, the progress bar will update in realtime as the upload is in progress. Uploads will start right after selecting images, there is no need to start the process. During uploading, an upload may be cancelled. When the upload is finished, the status text changes to “Processing…”. During this time, the system will create thumbs, update database records and reward karma. When the image is processed, it will fade out and dissapear from the queue. The next image will then be uploaded and processed, until all are done. When all images in the queue are done, you can select more images or go to edit the uploaded images:

This page shows the number of uploaded images and the actual images. You can apply tags to the entire set of images by clicking the orange “Tag these images” button:

After hitting “Save”, all images in the batch will have the tags applied. You can also edit images one by one by clicking on them:

When you are done, you will be taken to your profile that showcases your newly uploaded and edited images:

That’s it. Apologies for the low quality, but here’s a video demonstrating the entire process:

To tell you the truth it has been a hellish trip getting all of this to work, a task sorely underestimated. Would you be interested in a making of? What do you think about this implementation?