Question

I have been looking for a suitable image upload component for a website I’m working on, that will enable multiple image uploads, the ability to delete these individual uploads one by one, once uploaded and that plays nicely with .NET MVC.

The nicest component that I’ve seen so far is BlueImp’s jQuery Upload, and have downloaded the sample MVC project from here:

https://github.com/maxpavlov/jQuery-File-Upload.MVC3

However, I do have 2 issues that I’m trying to get my head around.

Issue 1
In my web application, the user can create a post, and on the same page as they enter the post details, prior to submitting this post to a messageboard, they need to be able to upload 1 or more images (using jQuery File Upload).

The sample code in the BlueImp project above, handles the image uploads, in that the files are stored in the appropriate location on the server, and the UI is updated upon successful upload, to reflect those images that the user has uploaded.

However, when the user goes to actually submit their post, in my Controller’s ActionMethod, in addition to storing the normal post details, I also need to store the details (filenames more specifically) of any images that the user had uploaded for their post, so I can associate the post details with the relevant x uploaded images.

What would be the best way to get this uploaded image information within the ActionMethod for submitting the post? I was thinking about storing information in the Session object that I could then sniff within the ‘SubmitPost’ActionMethod, but I don’t like relying on sessions if I can help it, with expiry issues. I also thought about having an ‘UploadLog’ table in the DB, which holds images uploaded by that user, that haven’t yet been submitted (with the post), but unless I have some housekeeping process that runs periodically, this could get messy? I was hoping there might be a something simple in the Request collection that jQuery Upload provides, that lists the filenames of the images uploaded, or something similar?

Issue 2
Once I have got around the above issue, I want to allow users to edit their existing posts, some of which will have uploaded photos associated with them.

When they reach my Edit Post page, in addition to prefilling all the controls on the page with their post details that they originally supplied, I want to show the list of images that they uploaded for this post, along with the ability to either delete any of them, or upload additional images.

I can see within the BlueImp sample MVC project that there is a jQuery template for both images waiting to be uploaded, and images that have successfully been uploaded, but I can’t see any example within the sample application of how to populate this list of successfully uploaded images, in the ‘edit post’ scenario I’ve just described.

The below is the template within my View, that renders successfully uploaded images, which is ideally what I’d like repopulated in this ‘EditPost’ scenario.

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>

Any help on either of the above 2 issues would be much appreciated.

UPDATE
Issue 1 is now resolved using Darin’s suggestion of creating a Guid, passing to the view, and back out to the upload function when that’s called.

Issue 2 I have managed to work out now and will post my solution shortly.

Answer 1

Issue 1

You could create a new Guid when rendering the Create form. Then when the files are uploaded you will store them inside the Server.MapPath("~/Files/{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}") folder. Then when the form is submitted the unique Guid will be sent as a hidden field and you will be able to go ahead and look inside the corresponding folder for all the files that the user has uploaded:

public ActionResult Create()
{
    var id = Guid.NewGuid();
    // pass this to the view
}

[HttpPost]
public ActionResult Upload(Guid id)
{
    // store the uploaded file at the specified by the GUID sub-folder
}

Issue 2

Same technique, just use the associated Guid instead of creating a new one:

public ActionResult Edit(Guid guid)
{
    // go and fetch all the files that are inside the corresponding folder
}