Clever Geek Handbook

Loading multiple jQuery files with additional form data

Has anyone managed to create a multi-user file upload solution that includes some additional form data. So in this example, the workflow looks something like this.

  • User clicks add file / upload button
  • User selects one or more files from a set of files
  • Multiple items are added to the upload queue
  • Each queue item has an additional user input field. e.g. title for image / video
  • User clicks on download and requests are sent to server

Most of what I'm 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 suitable solution for.

This is step 4 that causes problems. In uploadify I noticed that you can set the element template so that I can add the form element and not the problem.

The problems start when the form is submitted, I cannot receive the event or somehow I can set the form data back anywhere to post back.

Has anyone pulled this out or could help with a solution for this. I'm open to anything that works ...

Thanks in advance...

+3


source to share


1 answer


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

First, follow these steps in this article:

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

Now consider the following:



  • Customize the string template as described in the article.

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

  • Capture the click for a button on the form, disable the default actions for it, then call data.submit on each item in the list you wrote down during step 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 more items we don't submit twice
      queueItems.length = 0
+4


source






More articles:


All Articles