title: Adding ajax jQuery File upload
body: <p>So, I have the following form for image upload:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form name="upload_image"&gt;
      &lt;input id="fileupload"  type="file" name="files[]" class="files rhiu" onchange="UploadImage(event);" accept='image/*'/&gt;
      &lt;div id="progress"&gt;
          &lt;div class="bar" style="width: 0%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ul id="fileList"&gt;
      &lt;!-- The file list will be shown here --&gt;
      &lt;/ul&gt;   
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>PHP:</strong></p>
  
  <pre><code>add_action( 'wp_ajax_UploadImage', 'UploadImage' );
  add_action( 'wp_ajax_nopriv_UploadImage', 'UploadImage' );
  function UploadImage()
  {
  $upload_dir = wp_upload_dir();
  $files = $_FILES['files'];
  foreach ($files['name'] as $key =&gt; $value) {            
      ...ADDING IMAGE TO A POST...
      } 
  } 
  echo json_encode($image_path);
  exit;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function UploadImage(e)
  {
    var form = document.forms.namedItem("upload_image"); 
    var formdata = new FormData(form); 
    formdata.append('action', 'UploadImage');
    jQuery.ajax({
      type: "POST",
      dataType: "json",
      url: upload_image.ajax_url, 
      data: formdata,
      contentType: false,
      processData: false,
      success: function(data) {                   
        alert('Success');
      }       
    });
  }
  </code></pre>
  
  <p>As of these, everything works fine.</p>
  
  <p>But I am trying to implement Bluimp jQuery File upload as the uploading handler following the chosen answer <a href="https://stackoverflow.com/questions/17934689/can-someone-explain-how-to-implement-the-jquery-file-upload-plugin">here</a>.</p>
  
  <p>I am having a hard time to use the <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Options#ajax-options" rel="nofollow noreferrer">ajax option</a>.</p>
  
  <p><strong>So here is what I am trying to do:</strong></p>
  
  <ol>
  <li>using the blueimp jQuery file upload to upload images.</li>
  <li>The data are added via ajax function ("UploadImage").</li>
  </ol>
  
  <p>What change do I need to make in the js to include the plugin?</p>
  
  <p><strong>What I tried:</strong></p>
  
  <pre><code>var form = document.forms.namedItem("upload_video"); 
  var formdata = new FormData(form); 
  formdata.append('action', 'UploadImage');
  $('#fileupload').fileupload({
    type: "POST",
    dataType: "json",
    url: upload_image.ajax_url, 
    data: formdata,
    add: function (e, data) {
      var tpl = $('&lt;li class="working"&gt;'+
        '&lt;input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /&gt;'+
          '&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/li&gt;' );
      tpl.find('p')
        .text(data.files[0].name)
        .append('&lt;i&gt;' + formatFileSize(data.files[0].size) + '&lt;/i&gt;');
      data.context = tpl.appendTo(ul);
      tpl.find('span')
        .click(function() {
          if (tpl.hasClass('working')) {
            jqXHR.abort();
          }
          tpl.fadeOut(function(){
            tpl.remove();
          });
        });
      var jqXHR = data.submit();
    },
    progressall: function (e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      $('#progress .bar').css(
          'width',
          progress + '%'
      );
    }
  });
  </code></pre>