title: Set value of hidden field AFTER file upload completes using blueimp File Upload
body: <p>i have the below code which uploads and displays an alert of the file uploaded absolutely fine. However, as i am adding stuff to the file name when it saves it to my server, id like the done function inside the jquery to update the value of a hidden field with the saved filename. I thought this would be simple, but it isn't. Let me show you the code i am working with:</p>
  
  <p>function to upload files of each appended item form. This works as it should:</p>
  
  <pre><code>function bindFileUpload() {
      $('.fileupload').fileupload({
          dataType: 'json',
          done: function (e, data) {
              $.each(data.result.files, function (index, file) {
                  alert(file.name);
              });
          }
      });
  };
  </code></pre>
  
  <p>The code i am using to append more item forms is below. Again this works fine in conjunction with the above function. The input i want to set a value to is <code>.itemPhotoFile</code></p>
  
  <pre><code>$(document).on('click','.addItem', function(){
      $('&lt;!--ROW START--&gt;\
          &lt;form class="widget-content item"&gt;\
              &lt;div class="row"&gt;\
                  &lt;div class="col-md-3"&gt;&lt;input type="text" class="form-control" name="itemName[]"&gt;&lt;/div&gt;\
                  &lt;div class="col-md-3"&gt;&lt;textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"&gt;&lt;/textarea&gt;&lt;/div&gt;\
                  &lt;div class="col-md-3"&gt;&lt;textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"&gt;&lt;/textarea&gt;&lt;/div&gt;\
                  &lt;input type="hidden" class="itemId" name="itemId[]" value=""&gt;\
                  &lt;input type="hidden" class="itemPhotoFile" name="itemPhoto[]" value=""&gt;\
                  &lt;input type="hidden" name="itemInventoryId[]" value="&lt;?=$_GET["inventory_id"]?&gt;"&gt;\
                  &lt;input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'"&gt;\
                  &lt;div class="col-md-2"&gt;\
                      &lt;div class="fileinput-holder input-group" data-item-id=""&gt;\
                          &lt;!-- &lt;div class="uploadPhotoBox"&gt;Upload Photo&lt;/div&gt; --&gt;\
                          &lt;input class="fileupload" type="file" name="files[]" data-url="uploads/"&gt;\
                      &lt;/div&gt;\
                  &lt;/div&gt;\
                  &lt;div class="col-md-1 align-center"&gt;&lt;i class="save icon-ok large"&gt; &lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i class="delete icon-trash large"&gt; &lt;/i&gt;&lt;/div&gt;\
              &lt;/div&gt;\
          &lt;/form&gt;\
      &lt;!--/ROW END--&gt;').fadeIn(500).appendTo($(this).parents().siblings('.items')).each(function(){
          bindFileUpload();
      });
      $(this).parents().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
  });
  </code></pre>
  
  <p>i have tried ideas such as:</p>
  
  <pre><code>function bindFileUpload() {
      $('.fileupload').fileupload({
          dataType: 'json',
          done: function (e, data) {
              $.each(data.result.files, function (index, file) {
                  alert(file.name);
                  $(this).closest('.itemPhotoFile').val(file.name);
              });
          }
      });
  };
  </code></pre>
  
  <p>but no luck, i dont think it knows what <code>$(this)</code> is properly and cant find the input. I cant find the value of the input field BEFORE upload as this isnt the final filename. So it is important for it to work AFTER the success of the upload.</p>
  
  <p>Thanks!</p>