title: jquery-file-upload: handle multiple uploads but create photo object before fileupload
body: <p>I am using rails and jquery-file-upload to handle multiple photo uploads from browser to server. I had an example setup working, but the thing is that I would like to create a photo object on the server first for each photo before sending the photo itself (I want users to be able to set attributes on the photo while the upload is still in progress so I need an id on the server for that).</p>
  
  <p>Therefore I implemented the jquery-file-upload add event to first send an AJAX request to the server and execute its javascript response which includes a new_photo_id and a template placeholder called add_to_dom to display on the client. Since I don't yet have the photo id when the form is created, I need to update the url that jquery-file-upload uses to send the photo to include the id which is possible only after the photo object creation succeeded.</p>
  
  <p>For a single file this approach works well, but for multiple files I see only one AJAX create request coming in, and it tries to upload all files with the same new_photo_id. Initially I thought that the problem lies with the global scope of the new_photo_id variable (this might still be an issue), but as said I actually see only one ajax create request coming in. </p>
  
  <p>Also worthwhile to mention is that I was initially following the railscast about jquery-file-upload where he uses the method of sending files on by one instead of in an array. Indeed I see that the browser passes multiple file data objects to the server that contain a files array[1] with the info for each file (as well as an originalfiles array with metadata).</p>
  
  <p>The form looks something like this:</p>
  
  <pre><code>&lt;form action="/photos" enctype="multipart/form-data" id="fileupload" method="post"&gt;
    &lt;input name="_method" type="hidden" value="patch" /&gt;
    &lt;input id="photo_image" multiple="multiple" name="photo[image]" type="file" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the code that handles the jquery-file-upload on the client side:</p>
  
  <pre><code>jQuery(function() {
    return $('#fileupload').fileupload({
      dataType: "script",
      add: function(e, data) {
        // first create new photo object
        $.ajax({
          type: 'POST',
          url: '/photos',
          dataType: "script"
        }).success(function() {
           // add new photo row to dom
           $('#photos').append(add_to_dom);
  
           // change file upload url to reflect newly created photo object
           data.url='/photos/'+new_photo_id;
  
           // submit photo
           return data.submit();
        });
      }
    });
  });
  </code></pre>
  
  <p>The JS response from the server that is executed by jquery is created by rails and along the lines of:</p>
  
  <pre><code>new_photo_id=&lt;%= @photo.id %&gt;;
  add_to_dom='&lt;%= j(render partial: "photos/photo", object: @photo) %&gt;';
  </code></pre>
  
  <p>What am I missing??</p>
  
  <p>Thank you in advance!</p>