jQuery File Upload Plugin

In a previous blog post, I presented a wonderful jQuery plugin that allows a user to quickly upload multiple images. You can demo the plugin here. I will walk through how I have created a new Visual Studio solution that will implement the jQuery File Upload plugin and save a unique identifier to the database that groups the images into a library.

Also, each image will be assigned a unique name. This will prevent duplicate file names and if the user wants to upload the same image more than once, it will not conflict with other images. In addition, I will walk through creating a GitHub repository for the project.

I created a small ImageLibrary project that's on GitHub: Image Library. In order to make each file categorized into it's own group, I created a table dbo.Auction. The group will have a unique identifier as the primary key that will be generated by the Auction class constructor.

Within the Utilites folder, the GuidComb class will create the unique identifier. This could be handled on the database side on insert record by using the Newid() on default value, but I chose to use code.

I created an Auction controller, which will have the methods for managing the Image Library groups. For now, the groups can be created and edited. Fill free to fork this project on GitHub and improve this code, which is very limited. On another note, I normally would not use Entity Framework and instead create my own ADO.net layers but for this project I chose entity framework because of the Code First feature and Identity framework.

After I create an auction and uploaded some images to that group, the auction and images are assigned unique identifiers.

The code will create a group folder with the unique identifier as the name. Next, the code will save that group name in the dbo.Auction database table. The image's name does not need to be saved in the database because the group name will serve as a key. All of the images assigned to that group will be saved within the group folder with their new unique names. The thumbs folder is a 80x80 pixel version of the image for preview.

Go to the homepage and you'll see the group of images that was created in the primary section. Click on the View More Pictures button to see all the images as a thumbnail in the group, but click on the image for a larger view which implements a nice jquery slideshow plugin.

In conclusion, this small database driven application will allow an user to manage images in groups and upload multiple images with one submission.

Please fill free to leave comments below:

Software Solutions

We want to get involved