JQuery multi file upload with additional form data

Question

Has anybody had any luck creating a multi file upload solution where some extra form data is included. So in this example the workflow goes something like this.

1. The user clicks the add file / upload button
2. The user selects one or more files from a file picker
3. Several items get added to the upload queue
4. Each queue item has an additional user input field. eg a title for the image/video
5. The user hits upload and the requests go on their way to the server

Most of what I am trying to do can be done with something like uploadify or Jquery upload but there is one part I can't seem to find a good solution for.

It's step 4 that is causing the trouble. In uploadify I noticed you can set an item template so I can actually add the form element not problem.

The problems start when the form submits, I can't seem to get an event out or any way I can set that form data back anywhere for the post back.

Has anybody pulled this off or able to help with a solution for this. I am open to anything that will work....

Thanks in advance ...

Answer 1

You can totally do this with JQuery-Upload, it just takes some coercing. The control fires an add event which returns a data object used to submit the request to the server. Add is called once for each item added to the queue. I don't have a full demo but here is the gist of it...

First, follow most of the steps in this article:

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

Now consider doing the following:

1. Customize the row template as explained in the article.

2. Capture the add event for the control and put the data item returned from the add event into a list.

3. Capture a click for a button on the form, prevent default actions for it then call data.submit for each item in the list captured during step in 2.

So, something like this coffee script example ...

jQuery ->

  queueItems = new Array()

  $('#my_upload').fileupload

    add: (e, data) ->
        # after doing any other processing needed, keep a list of the data objects added
        queueItems.push(data)

    $('#form_submit').click (event) =>

      # don't do the default action
      event.preventDefault()

      for data in queueItems

        # get the inputs from the row associated with this item in the queue
        inputs = data.context.find(':input')

        # get any other general hidden inputs from the page you want associated with the row.
        # merge keeps the jquery search results in a format that works with serializeArray
        inputs = $.merge(inputs, $("#some_field"))

        # set the form data for the request
        data.formData = inputs.serializeArray();

        #submit it
        data.submit()

      # reset the queue so if the user add's more items we don't submit twice
      queueItems.length = 0