jQuery.form uploadProgress never called
Question
I'm trying to write a WordPress plugin that uploads a video using the Vimeo API. I am trying to provide a progress bar for the upload to the user can see that it is working. To produce the status bar I am using the jQuery.Form plugin and accessing the uploadProgress callback but I cannot get the callback to fire. I am using Chrome 19 so the upload and file API's should be available to the browser.
I have been copying the code from the jQuery.Form demo, which works on their page but has no effect on mine. - http://jquery.malsup.com/form/progress.html
The little Chrom notification in the bottom left of the screen is showing the upload percentage so I am confident that the file is being sent.
Thoughts?
<form method="POST" action="<?php echo $endpoint; ?>" id="vimeo_upload_form" enctype="multipart/form-data">
<p>
<label>Upload video to Vimeo</label>
<input type="hidden" name="ticket_id" value="<?php echo $token; ?>" id="ticket_id"/>
<input type="hidden" name="chunk_id" value="0" id="chunk_id"/>
<input type="file" name="file_data" id="file_data"/>
</p>
<p>
<input type="submit" name="" value="upload">
</p>
</form>
jQuery(document).ready(function($) {
status_msg = $("#status_msg")
console.log(status_msg)
percent = $("#percentage")
bar = $("#bar")
$('#vimeo_upload_form').ajaxForm({
beforeSend: function() {
status_msg.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status_msg.html(xhr.responseText);
}
});
});
5 answers
solution1
3 2012-08-10 11:38:38
I found this somewhere and it works on my site. I am able to upload videos and it shows a progress bar while uploading with a percentage done.
All you need is your php file to move your video from it's temp location to its destination.
Hope it works for you as it does for me :)
<html>
<head>
<style type="text/css"?
#progressbox {
border: 1px solid #ccc;
padding: 1px;
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:40px;
border-radius: 3px;
background-color: #20bbfb;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//elements
var progressbox = $('#progressbox');
var progressbar = $('#progressbar');
var statustxt = $('#statustxt');
var submitbutton = $("#SubmitButton");
var myform = $("#UploadForm");
var output = $("#output");
var completed = '0%';
$(myform).ajaxForm({
beforeSend: function() { //brfore sending form
submitbutton.attr('disabled', ''); // disable upload button
statustxt.empty();
progressbox.slideDown(); //show progressbar
progressbar.width(completed); //initial value 0% of progressbar
statustxt.html(completed); //set status text
statustxt.css('color','#000'); //initial color of status text
},
uploadProgress: function(event, position, total, percentComplete) { //on progress
progressbar.width(percentComplete + '%') //update progressbar percent complete
statustxt.html(percentComplete + '%'); //update status text
if(percentComplete>50) {
statustxt.css('color','#fff'); //change status text to white after 50%
}
},
complete: function(response) { // on complete
output.html(response.responseText); //update element with received data
myform.resetForm(); // reset form
submitbutton.removeAttr('disabled'); //enable submit button
progressbox.slideUp(); // hide progressbar
}
});
});
</script>
</head>
..
..
<form id="UploadForm" action="process.php">..</form>
<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div>
<div id="output"></div>
solution2
2 2012-10-21 23:18:04
I had the same issue with jQuery Form in my WordPress plugin, which did not fire the uploadProgress callback.
I had enqueued the latest version of jQuery Form plugin with 'jquery-form' as the handle and then I found that WordPress has already included jQuery Form plugin registered with the same handle! Therefore, actually the new version that I had enqueued was not being loaded. And the problem with the WordPress version of the plugin is that it's an old version which doesn't support uploadProgress callback.
So the solution was to deregister the WordPress version of jQuery Form plugin and then register the new version.
solution3
0 2013-07-02 02:23:13
You should try to use a newer Ajax Form version. Stay tuned about version of jQuery required. You can download it from http://malsup.github.io/jquery.form.js
solution4
0 2013-08-18 00:56:21
you didn't declare "bar" object
u must add to your code
<div id='bar'></div>
and everything will be okay ..
solution5
0 2014-06-03 15:17:23
I've been checking into this, as I had the same problem. To my understanding, you are referencing to elements not yet loaded, that's why the callback doesn't fire.
Set an options array along with form submit binding outside of document.ready, set the .ajaxForm() inside.
Like this:
$(document).ready(function() {
$('#form_ajax').ajaxForm();
});
var options = {
beforeSubmit: function(arr, $form, options) {
$('#sending_mail').show();
},
success: function() {
$('#sending_mail').hide();
$('#form_ajax').clearForm();
$('#form_ajax').resetForm();
}
};
and then bind your form like this:
$('#form_ajax').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.