Add progress bar to Imgur uploader
parent
e4fd3a1026
commit
ced33d964b
24
src/imgur.js
24
src/imgur.js
|
@ -35,8 +35,14 @@ function show_imgur_uploader(){
|
||||||
var form_data = new FormData();
|
var form_data = new FormData();
|
||||||
form_data.append('image', blob);
|
form_data.append('image', blob);
|
||||||
|
|
||||||
|
var $progress = $(E("progress")).appendTo($imgur_window.$main);
|
||||||
|
var $progress_percent = $(E("span")).appendTo($imgur_window.$main).css({
|
||||||
|
width: "2.3em",
|
||||||
|
display: "inline-block",
|
||||||
|
textAlign: "center",
|
||||||
|
});
|
||||||
|
|
||||||
// send HTTP request to the Imgur image upload API
|
// send HTTP request to the Imgur image upload API
|
||||||
// TODO: progress bar for upload
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: "https://api.imgur.com/3/image",
|
url: "https://api.imgur.com/3/image",
|
||||||
|
@ -47,10 +53,25 @@ function show_imgur_uploader(){
|
||||||
data: form_data, // what we're sending
|
data: form_data, // what we're sending
|
||||||
processData: false, // don't try to process the form data (avoid "Illegal invocation")
|
processData: false, // don't try to process the form data (avoid "Illegal invocation")
|
||||||
contentType: false, // don't send an incorrect Content-Type header please (avoid 500 error from Imgur)
|
contentType: false, // don't send an incorrect Content-Type header please (avoid 500 error from Imgur)
|
||||||
|
xhr: function() {
|
||||||
|
var myXhr = $.ajaxSettings.xhr();
|
||||||
|
if(myXhr.upload){
|
||||||
|
myXhr.upload.addEventListener('progress', function(event){
|
||||||
|
if(event.lengthComputable){
|
||||||
|
var progress_value = event.loaded / event.total;
|
||||||
|
var percentage_text = Math.floor(progress_value * 100) + "%";
|
||||||
|
$progress.val(progress_value);
|
||||||
|
$progress_percent.text(percentage_text);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
return myXhr;
|
||||||
|
},
|
||||||
beforeSend: function(){
|
beforeSend: function(){
|
||||||
$imgur_description.text("Loading...");
|
$imgur_description.text("Loading...");
|
||||||
},
|
},
|
||||||
success: function(data){
|
success: function(data){
|
||||||
|
$progress.add($progress_percent).remove();
|
||||||
if(!data.success){
|
if(!data.success){
|
||||||
$imgur_description.text("Failed to upload image :(");
|
$imgur_description.text("Failed to upload image :(");
|
||||||
return;
|
return;
|
||||||
|
@ -87,6 +108,7 @@ function show_imgur_uploader(){
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
error: function(error){
|
error: function(error){
|
||||||
|
$progress.add($progress_percent).remove();
|
||||||
$imgur_description.text("Error uploading image :(");
|
$imgur_description.text("Error uploading image :(");
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue