I have an API call like "/servername + uploadfilename". I need to upload files using blueimp jquery uploader + progressbar. What I am doing:
Markup:
<div id="wrap">
<input id="fileupload" type="file" name="files[]" multiple>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</div>
jquery + ajax uploader:
$('#fileupload').fileupload({
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|tif|tiff)$/i,
dataType: 'json',
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log('progress: ' + progress);
$('#progress .bar').css('width', progress + '%');
},
add: function(e, data) {
data.context = $('<button/>').text('Upload')
.appendTo($('#fileupload'))
.click(function() {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
$.each(data.files, function(index, file) {
console.log(file.name);
$.ajax({
url: webServer + file.name,
type: 'PUT',
xhrFields: {
withCredentials: true
},
data: file,
processData: false,
success: function(data) {
console.log("succeeded");
}
});
});
},
done: function(e, data)
{
console.log('done');
}
});
So, files upload well (inside "add" listener fires ajax request for the following url: "webServer + file.name"), but "progressall" listener is not fires. I found out that is just because I can't specify "data-url" property for #fileupload element, but in this case I don't know how to specify a correct url for "data-url" property.
Is there a way to upload files to the url like "webServer + file.name" and show progressbar?
Thanks.
I've resolved this issue by adding option type: 'PUT'
and I've got rid from ajax-jquery request inside add:
listener