RajanSingh's avatar

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());


});
0 likes
0 replies

Please or to participate in this conversation.