Jan 4, 2017
0
Level 1
fs-Upload
Hlw, I am using fs-upload for upload files. But It shows upload progress bar more than one however I am uploading just a single file. my code is..
$(this).ready(function() {
var documentUpload = $('#document-uploads');
var documentType = $('#documentType');
var documentProgresses = $('#document-progresses');
var documentBody = $('#document-body');
var documentItem = function(documentTypeId) {
documentUpload.upload('destroy');
documentUpload.upload({
action: '/system/employees/{{ $employee_id }}/certification',
maxSize: 20971520,
maxQueue: 1,
postKey: 'files',
postData: { documentType: documentTypeId }
}).on('start.upload', function(e, files) {
documentProgresses.show('slow');
}).on('complete.upload', function(e) {
documentProgresses.hide('slow');
}).on('fileerror.upload', function(e, file, error) {
$('div[data-index="d' + file.index + '"')
.addClass('progress-bar-danger')
.text(error);
}).on('filecomplete.upload', function(e, file, response) {
$('li[data-index="d' + file.index + '"').remove();
if(response.id !== undefined) {
var documentTypeName = $("#documentType option[value='" + response.job_document_type_id + "']").text();
documentBody.append(documentTypeName + " <a href'" + encodeURI(response.url) + "' target='_blank'>" + encodeURI(response.url) + "</a> <span data-id='" + response.id + "' data-name='removeDocument'><i class='glyphicon glyphicon-remove-circle'></i></span><br />");
}
}).on('filestart.upload', function(e, file) {
documentProgresses.append("<li class='list-group-item' data-index='d" + file.index + "'><div class='progress' data-index='d" + file.index + "'><div class='progress-bar' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 100%;'>" + file.name + ": 0%</div></div></li>");
}).on('fileprogress.upload', function(e, file, percent) {
$('div[data-index="d' + file.index + '"')
.css('width', percent + '%')
.attr('aria-valuenow', percent)
.text(file.name + ': ' + percent + "%");
}).on('filecomplete.upload', function(e, file){
$.notify({ message: 'file uploaded' }, { type: 'success' });
});
};
documentType.change(function() {
documentItem($(this).val());
});
documentItem(documentType.val());
});
Please or to participate in this conversation.