6

I have a component:

<aura:component controller="FileUploadController">
<ltng:require styles="{!join(',',
                      $Resource.DropZone + '/basic.min.css',
                      $Resource.DropZone + '/dropzone.min.css')}" />
<ltng:require scripts="{!join(',',
                       $Resource.DropZone + '/jquery-3.3.1.min.js',
                       $Resource.decoder + '/he-master/he.js',
                       $Resource.DropZone + '/dropzone.min.js')}" afterScriptsLoaded="{!c.initializeDropzone}"/>

<aura:attribute name="eventId" type="String" />
<aura:attribute name="fileInfo" type="String" />
<aura:attribute name="fileInfoToDelete" type="String" />
<aura:attribute name="shouldBeDeleted" type="Boolean" />

<div class="dropzone" aura:id="eventFileAttachment" style="height: 120px; width: 120px;"></div>

And the javascript controller:

initializeDropzone : function(component) {
    console.log('Dropzone Being Initialized');
    Dropzone.autoDiscover = false;
    var thisEventId = component.get('v.eventId');

    var getEventAttachments = component.get('c.getEventAttachments');
    getEventAttachments.setParams({eventId: thisEventId});

    getEventAttachments.setCallback(this, function(response){
    //Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.FileUploadController.getEventAttachments}', '{!eventId}', function(result, event){
    var result = he.decode(response.getReturnValue());
    var fileObjectsArr = JSON.parse(result);
    var dropzoneElement = component.find('eventFileAttachment').getElement();

    //Initialize Dropzone
    var dropzone = $(dropzoneElement).dropzone({
        url: '/space-taker-upper',
        autoProcessQueue: false,
        addRemoveLinks: true,
        maxFiles: 1,
        init: function(){
            console.log('initializing dropzone');
            component.set('v.shouldBeDeleted', false);
            this.on('maxfilesexceeded', function(file){
                this.removeFile(file);    
            });

            this.on('accept', function(file){
                var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');

                switch(file.type){
                    case 'application/pdf':
                        thumbnail.css('background', '{!URLFOR($Asset.slds, "assets/icons/doctype-sprite/svg/symbols.svg#pdf")}');
                        break;
                }
            });

            this.on('addedfile', function(file){
                //console.log('Adding file', file);
                var fileType = file.type.split('/');
                var dropzone = this;
                //console.log($A.get('$Resource.SLDS') + '/slds-master/assets/icons/doctype/pdf_60');
                    if(file.base64 == undefined || file.base64 == null || file.base64 == ''){
                        var reader = new FileReader();
                        reader.onload = function(){
                            //console.log('Got base64 URL');
                            file.base64 = reader.result;

                            /*Images*/
                            if(fileType[0] == 'image'){
                                dropzone.emit('thumbnail', file, file.base64);
                            }
                            /*PDF*/ 
                            else if(file.type == 'application/pdf'){//Done
                                //$('.dropzone .dz-preview .dz-image').css({'background':'/apexpages/slds/latest/assets/icons/doctype/pdf_120.png'});
                                //this.emit('thumbnail', file, file.dataURL);
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/pdf_120.png');
                            }
                            /*Word Doc*/ 
                            else if(file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/word_120.png');
                            }
                            /*Audio*/ 
                            else if(fileType[0] == 'audio'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/audio_120.png');
                            }
                            /*CSV*/ 
                            else if(file.type == 'application/vnd.ms-excel'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/csv_120.png');
                            }
                            /*mp4*/
                            else if(fileType[0] == 'video'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/video_120.png');
                            }
                            /*txt*/
                            else if(file.type == 'text/plain'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/txt_120.png');
                            }
                            /*zip*/
                            else if(file.type == 'application/x-zip-compressed'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/zip_120.png');
                            }
                            /*Excel*/
                            else if(file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/excel_120.png');
                            }
                            /*PowerPt*/
                            else if(file.type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'){//Done
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/ppt_120.png');
                            }
                            else{
                                dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/attachment_120.png');
                            }
                        };
                        reader.readAsDataURL(file);
                    }
                else{
                    /*Images*/
                    if(fileType[0] == 'image'){
                        dropzone.emit('thumbnail', file, file.base64);
                    }
                    /*PDF*/ 
                    else if(file.type == 'application/pdf'){//Done
                        //$('.dropzone .dz-preview .dz-image').css({'background':'/apexpages/slds/latest/assets/icons/doctype/pdf_120.png'});
                        //this.emit('thumbnail', file, file.dataURL);
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/pdf_120.png');
                    }
                    /*Word Doc*/ 
                    else if(file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/word_120.png');
                    }
                    /*Audio*/ 
                    else if(fileType[0] == 'audio'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/audio_120.png');
                    }
                    /*CSV*/ 
                    else if(file.type == 'application/vnd.ms-excel'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/csv_120.png');
                    }
                    /*mp4*/
                    else if(fileType[0] == 'video'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/video_120.png');
                    }
                    /*txt*/
                    else if(file.type == 'text/plain'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/txt_120.png');
                    }
                    /*zip*/
                    else if(file.type == 'application/x-zip-compressed'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/zip_120.png');
                    }
                    /*Excel*/
                    else if(file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/excel_120.png');
                    }
                    /*PowerPt*/
                    else if(file.type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'){//Done
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/ppt_120.png');
                    }
                    else{
                        dropzone.emit('thumbnail', file, '/apexpages/slds/latest/assets/icons/doctype/attachment_120.png');
                    }
                }
            });

            this.on('thumbnail', function(file, dataUri){
                //console.log('Generating thumbnail', file); 
                if(file.status != 'error'){
                    var fileToUpload = {
                        type: file.type,
                        name: file.name,
                        base64: file.base64,
                        size: file.size,
                        accepted: file.accepted
                    };
                    try{
                        var splitBase64 = fileToUpload.base64.split(';');
                        var splitAgain = splitBase64[1].split(',');
                        fileToUpload.base64Body = splitAgain[1];
                    }catch(err){
                        //console.log('Base64 data not set up properly: ' + fileToUpload.base64);
                    }

                    if(file.fileId != undefined && file.fileId != null){
                        fileToUpload.fileId = file.fileId;
                    }
                    if(file.eventId != undefined && file.eventId != null){
                        fileToUpload.eventId = file.eventId;
                    }
                    component.set('v.fileInfo', JSON.stringify(fileToUpload));

                    $(dropzoneElement).css({'margin-bottom':'40px'});
                }
            });

            this.on('removedfile', function(file){
                //console.log('File Removed', file);
                if(file.status != 'error'){
                    var fileToDelete = {
                        type: file.type,
                        name: file.name,
                        base64: file.base64,
                        size: file.size,
                        accepted: file.accepted
                    };
                    if(file.fileId != undefined && file.fileId != null){
                        fileToDelete.fileId = file.fileId;
                    }
                    if(file.eventId != undefined && file.eventId != null){
                        fileToDelete.eventId = file.eventId;
                    }
                    if(fileToDelete.fileId != undefined){
                        component.set('v.fileInfoToDelete', JSON.stringify(fileToDelete))
                        component.set('v.shouldBeDeleted', true);
                    }
                    $(dropzoneElement).css({'margin-bottom':'0px'});
                }
            });

            //On initialization, add the file already saved to this event (if one exists) to the dropzone,
            //then generate the thumbnail image of the file.
            if(fileObjectsArr.length > 0){
                this.emit('addedfile', fileObjectsArr[0]);
                this.emit('complete', fileObjectsArr[0]);
                this.files.push(fileObjectsArr[0]);

            }
        }
    });
    });

    $A.enqueueAction(getEventAttachments);
}

Then, in a visualforce page, I instantiate the lightning component when the user clicks a button to open an editor:

//Set up dropzone for file uploading
                    if($('#eventDropzone') != undefined && $('#eventDropzone') != null){
                        $Lightning.use('c:DropZoneComponentApp', function(){
                            $Lightning.createComponent('c:DropZoneComponent', {eventId: currentEvent.taskId}, 'eventDropzone', function(cmp){
                                console.log('Component Created!', cmp);
                                dropzoneCmp = cmp;
                            });
                        });
                    }

The editor template has the #eventDropzone div that is empty. When the user clicks the button, it gets a new form of the template (with empty div), and sets the template html to the editor. When the editor closes, the editor div is completely emptied and destroyed, I assume this destroys the lightning component, but not sure.

Problem:

When I open the editor the first time, everything works fine. When I close it and open it again, I get the very helpful error: This page has an error. You might just need to refresh it. [NoErrorObjectAvailable] Script error.

I have no idea what causes this since it works fine the first time! Do I need to do something special to destroy the component when the editor closes? Even though the editor div is being emptied and destroyed? Does it have something to do with including JQuery in the Lightning component, and also having JQuery on the Visualforce page?

Edit:

I noticed this going on in the Sources in Chrome dev tools:

enter image description here

All the component files seem to still be there... which could potentially be the issue as it works when they are not part of the page at all the first time, then it gets created and those files get added. I call dropzoneCmp.destroy() when closing the editor, but that doesn't seem to be doing much...

  • Suggest you try to narrow down the location of the error via your browser's Developer Tools. – Keith C Mar 26 '18 at 16:39
  • It happens in some obscure file while all the triggers and what not are firing. The fact that it is fine the first time and then this happens the second time is indicating to me that it may have something to do with what I questioned in my 'problem' section....... Possibly destroying it, JQuery in the component clashing. I have also had weird results while stepping through the code, the error could occur at different places depending on how fast I went through it. – Tyler Dahle Mar 26 '18 at 16:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.