4

So, I have the following form for image upload:

HTML:

<form name="upload_image">
    <input id="fileupload"  type="file" name="files[]" class="files rhiu" onchange="UploadImage(event);" accept='image/*'/>
    <div id="progress">
        <div class="bar" style="width: 0%;"></div>
    </div>
    <ul id="fileList">
    <!-- The file list will be shown here -->
    </ul>   
</form>

PHP:

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 => $value) {            
    ...ADDING IMAGE TO A POST...
    } 
} 
echo json_encode($image_path);
exit;
}

JS:

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');
    }       
  });
}

As of these, everything works fine.

But I am trying to implement Bluimp jQuery File upload as the uploading handler following the chosen answer here.

I am having a hard time to use the ajax option.

So here is what I am trying to do:

  1. using the blueimp jQuery file upload to upload images.
  2. The data are added via ajax function ("UploadImage").

What change do I need to make in the js to include the plugin?

What I tried:

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 = $('<li class="working">'+
      '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+
        '<p></p><span></span></li>' );
    tpl.find('p')
      .text(data.files[0].name)
      .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
    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 + '%'
    );
  }
});

1 Answer 1

2

first thing I noticed is in HTML

Need to make form multi-part for image uploading
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.