1 (edited by jmchauv 2017-05-24 15:25:18)

Topic: dynamic multipart_params for in progress uploads lost on re-initializa

I have a view in which I initialize a pluploader. I am able to leave this view and still allow the uploads to complete. The problem I am having is that whenever I re-enter the view, and there are uploads that are still in progress, the last multipart_param for "processId" that was assigned within "BeforeUpload" is used repeatedly instead of individually for each file.

Here's an example: I drop 5 files on the view. I leave the view. Meanwhile 2 files have completed upload progress. The processId for file 1 was "0123" and the processId for file 2 was "0124". I then re-enter the view. This script is ran again. The remaining files are all assigned processId 0124.

I'm sure this is happening because the script is being ran any time you enter the view and something is being overwritten, but I've yet to find a solution.

You can see within the uploader.fileAdded area, that I create a random series of int called a processId with this line

var processId = process.createProcessId(file.index);

Then below, within BeforeUpload, I assign that processId to a multipart_param so that I can assign a unique processId to each upload.

uploader.settings.multipart_params.processId        = file.processId;

The Script

/* detects when a user drags files from the desktop */
initDragDetector:function(){
    var runtimes        = ui.getUploadRunTimes();
    var tmpId           = Math.random();                

    uploader = new plupload.Uploader({
        runtimes            :runtimes,
        max_file_size       :'500mb',
        url                 :jQuery('#upSrvUrl').val(),
        drop_element        :'uploadOverlay',
        browse_button       :'uploadOverlay',
        filters : [
            {title : "Image files", extensions : "jpg,tif,png,psd"},
        ],
        max_file_count      :100,
        multipart_params    :{rnd_id:Math.random(),tmp_sid:tmpId},
        multi_selection     :true,
        file_data_name      :'upfile_0',
    });

    //INITIALIZATION HANDLER 1
    uploader.bind('Init',function(up, params){
        uploader.settings.multipart_params.mount                = jQuery('#mount').val(); 
        uploader.settings.multipart_params.publisherId          = jQuery('#publisherId').val();
        uploader.settings.multipart_params.upload_range         = 100;

        if(uploader.features.dragdrop){
            var el      = jQuery("#uploadOverlay");

            el[0].ondragover = function(event) {
                event.dataTransfer.dropEffect = "copy";
            };
            el[0].ondragenter = function(e) {
                if(e.dataTransfer.types.length < 4){
                    el.show();
                }
            };
            el[0].ondrop = function() {
                if(jQuery('.photoThumbContainer').length > 0){
                    el.hide();
                }
            };
        }
    });

    //FILES ADDED HANDLER 2 (called after a drop of files)
    uploader.bind('FilesAdded', function(up, files){
        var i = 0;
        plupload.each(files, function(file) {
            file.index = i;
            uploader.fileAdded(file);  
            i++;
        });
        uploader.start();
    });

    //inject the file into the interface (before before upload function)
    uploader.fileAdded = function(file){
        var processId           = process.createProcessId(file.index);
        //added to the file object and passed into the registration
        file.processId          = processId;
    };

    //BEFORE EACH UPLOAD HANDLER 3
    //Note: this has to be here for any variable passed that changes per file. For example the processId.
    uploader.bind('BeforeUpload',function(up,file){
        var processId       = file.processId;
        var photoDiv        = jQuery('#photo'+processId+' .photoThumbDiv');
        var image           = jQuery(new Image()).appendTo(photoDiv);
        var preloader       = new mOxie.Image();

        preloader.downsize(100,100);
        preloader.onload    = function() {
            var img         = preloader.getAsDataURL();
            jQuery('#photo'+processId+' .photoThumbDiv').html('<img src="'+img+'">');
        };
        preloader.load(file.getSource());

        uploader.settings.multipart_params.processId        = file.processId;
    });

    //PROGRESS HANDLER 4
    uploader.bind('UploadProgress',function(up,file){
        var processId   = file.processId;
        var pb          = collection.getProgressBar(processId);
        if(file.percent<100){
            var progress = file.percent;
            pb.html('<div class="progressBar"><div class="progressBarColor"> </div></div>');
            jQuery('#photo'+processId+' .progressBarColor').css({width:progress+'%'});
        }else{
            pb.html('<div class="loaderSmall"></div> Processing');
        }
    });

    //FILE FINISHED HANDLER 5 
    uploader.bind('FileUploaded',function(up,file,info){
        var processId       = file.processId;
        var fileName        = file.name;
        file.fileName       = file.name;
        var params          = file;
        delete params.getNative;
        delete params.getSource;
        delete params.destroy;
        ui.request('registerFile','Photo',params);

        //ALL COMPLETE
        if(uploadedCnt == up.files.length){
            //uploader.splice();
            uploader.refresh();
        }
    });

    //GENERAL ERROR HANDLER -
    uploader.bind('Error', function(up, err) {
        switch(err.code){
            case plupload.FILE_EXTENSION_ERROR:
                fileExtensions = '';
                jQuery.each(up.settings.filters.mime_types,function(index,up) {
                    if(fileExtensions==''){
                        fileExtensions=up.extensions;
                    }else{
                        fileExtensions+=","+up.extensions;
                    }
                });
                var isOrAre = (fileExtensions && fileExtensions.indexOf(',') !== -1) ? 'are':'is';
                alertBox.msg("Only "+fileExtensions+" "+isOrAre+" accepted. Please try again.");
                break;
            case plupload.FILE_SIZE_ERROR:
                alertBox.msg("File size can not be larger than "+up.settings.max_file_size+'.');
                break;
        }
        uploader.refresh(); 
    });

    uploader.init();
},

Any input is appreciated. Thanks.

Re: dynamic multipart_params for in progress uploads lost on re-initializa

If anyone is interested in the solution here it is because uploader was being set globally. Adding 'var' in front of uploading whenever initializing the uploader fixed it.