title: jQuery File Upload - configuring and running
body: <p>I'm using this plugin: <a href="http://blueimp.github.com/jQuery-File-Upload/" rel="nofollow">jQuery File Upload</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;input id="fileupload" type="file" name="files[]" data-url="upload.php" multiple&gt;
          &lt;script src="/js/vendor/jquery.ui.widget.js"&gt;&lt;/script&gt;
          &lt;script src="/js/jquery.iframe-transport.js"&gt;&lt;/script&gt;
          &lt;script src="/js/jquery.fileupload.js"&gt;&lt;/script&gt;
          &lt;script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"&gt;&lt;/script&gt;
          &lt;script src="/js/jquery.fileupload-fp.js"&gt;&lt;/script&gt;
  
          &lt;div id="dropzone" class="fade well"&gt;Drop files here&lt;/div&gt;
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>$(document).ready(function() {
  
                  $('#fileupload').fileupload({
                      dataType: 'json',
                      dropZone: $('#dropzone'),
                      singleFileUploads: false,
                      add: function (e, data) {
                          $(this).fileupload('process', data).done(function () {
                              data.submit();
                          });
                      },
                      done: function (e, data) {
                          $.each(data.result, function (index, file) {
                              $('&lt;p/&gt;').text(file.name).appendTo(document.body);
                          });
                      },
                      process: [
                          {
                              action: 'load',
                              fileTypes: /^image\/(gif|jpeg|png)$/,
                              maxFileSize: 20000000 // 20MB
                          },
                          {
                              action: 'resize',
                              maxWidth: 1920,
                              maxHeight: 1080
                          },
                          {
                              action: 'save'
                          }
                      ]
                  });
                  $('#fileupload').bind('fileuploadsubmit', function (e, data) {
                      // The example input, doesn't have to be part of the upload form:
                      var GAL = $('#galleryId');
                      data.formData = {
                          galleryId: GAL.val(),
                          type: 'gallery',
                          entityId: 1
                      }
                      return true;
                  });
  
                  $(document).bind('dragover', function (e) {
                      var dropZone = $('#dropzone'),
                          timeout = window.dropZoneTimeout;
                      if (!timeout) {
                          dropZone.addClass('in');
                      } else {
                          clearTimeout(timeout);
                      }
                      if (e.target === dropZone[0]) {
                          dropZone.addClass('hover');
                      } else {
                          dropZone.removeClass('hover');
                      }
                      window.dropZoneTimeout = setTimeout(function () {
                          window.dropZoneTimeout = null;
                          dropZone.removeClass('in hover');
                      }, 100);
                  });
  
                  $(document).bind('drop dragover', function (e) {
                      e.preventDefault();
                  });
  </code></pre>
  
  <p>});</p>
  
  <p>Things I'd love to achieve:</p>
  
  <ol>
  <li>Resizing images at client side</li>
  <li>Then send images with additional form data (data are not comming to server side script) to upload.php</li>
  </ol>
  
  <p>Thanks a lot in advance.</p>