I've a problem with ajaxUpload. I want to call ajax request during file upload.
here is my code to generate a bootstrap-FileInput:
$("#form_csvFile").fileinput({
maxFileSize: 10000,
maxFileCount: 1,
language: 'fr',
dropZoneEnabled: false,
showUploadedThumbs: true,
showUpload: true,
showUploadedThumbs: false,
showPreview: false,
browseClass: "btn btn-primary",
removeClass: "btn btn-danger",
uploadUrl: "{{ path('notation_import') }}",
layoutTemplates: {
progress: ""
},
ajaxSettings: {
async: true
}
}).on('filebatchuploaderror', function(event, data, previewId, index) {
$("#progressValue").html("100%");
$("#finalProgress .progress-bar").css('width', "100%");
$("#finalProgress .progress-bar").prop('aria-valuenow', 100);
$("#finalProgress .progress-bar").addClass("progress-bar-danger");
clearInterval(myInterval);
}).on('filebatchuploadsuccess', function(event, data, previewId, index) {
$("#progressValue").html("100%");
$("#finalProgress").css('width', "100%");
$("#finalProgress").prop('aria-valuenow', 100);
$("#finalProgress").addClass("progress-bar-success");
clearInterval(myInterval);
}).on('filepreajax', function(event, previewId, index){
$("#finalProgress").show();
myInterval = setInterval(function(){
$.ajax({
url: '{{ path('notation_ajax') }}',
async: true,
success: function (data) {
if (data.percent == 100) clearInterval(myInterval);
$("#progressValue").html(data.percent + "%");
$("#finalProgress .progress-bar").css('width',data.percent + "%");
$("#finalProgress .progress-bar").prop('aria-valuenow', data.percent);
}
});
}, 1500);
});
During document upload I have implement a Javascript "setInterval()" method to get percentage of completion (with ajax call witch return percentage only in Json).
Problem : First request send by bootstrap FileInput to upload my file blocks others...
I tried to set async = true
in ajax setting and getPercentage request, but nothing change.
Anyone has a solution for me ?
Thanks