File Upload in Lightning Component with lockerservice on

Question

I have this standard JavaScript code implemented in Lightning component to upload Files which works perfectly when LockerService is disabled.

Component:

<aura:component >
      <input type="file" aura:id="file" onchange="{!c.upload}" />
</aura:component>

Controller:

({
    upload : function(component, event, helper) {
        helper.save(component);
    }
})

Helper:

({
    MAX_FILE_SIZE: 4 500 000, /* 6 000 000 * 3/4 to account for base64 */
    CHUNK_SIZE: 950 000, /* Use a multiple of 4 */


    save : function(component) {
        var fileInput = component.find("file").getElement();
        var file = fileInput.files[0];
        console.log('file type'+typeof file);
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' + 'Selected file size: ' + file.size);
            return;
        }

        console.log('blob of file'+JSON.stringify(file));
        var fr = new FileReader();
        var self = this;
        fr.onload = function() {
            var fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);

            self.upload(component, file, fileContents);
        };
        console.log('before senfin'+JSON.stringify(file));
        //fileAdded = (Blob)fileAdded;
        //fr.readAsDataURL(file);
        fr.readAsArrayBuffer(file); //The error comes up on this line.
    }
})

Could anyone please guide me to implement the same with LockerService on?

Answer 1

We are currently experiencing a similar issue, but with the FileReader.readAsDataURL() method in HTML5.

We have raised the case with Salesforce and there is a known issue logged for it: https://success.salesforce.com/issues_view?id=a1p3A000000IYr8QAG

You would probably need to raise a support case with Salesforce for the FileReader.readAsArrayBuffer() method so they can investigate.

Answer 2

We ran into the same issue however we ended writing a File Upload component that uploads to S3. It is fully Locker compliant. We ended up putting the S3 JS SDK inside an iFrame and used window.postMessage.

Component:

<div class="slds-form-element slds-col">
      <div class="slds-form-element__control slds-grid">
        <input type="text" class="{!globalId+'_file_label slds-input slds-border-radius--right__none '}" id="{!globalId+'_file_label'}" aura:id="file_label" onchange="{!c.saveUrl}" placeholder="{!$Label.c.File_Upload_Placeholder}"/>
        <label for="file" onclick="{!c.uploadFile}" class="file-label slds-button slds-button--brand slds-border-radius--top-left__none slds-border-radius--bottom-left__none">
          {!v.browse}
        </label>
        <input  type="file" class="file hidden" name="file" id="{!globalId+'_file'}" aura:id="file" style="display:none" onchange="{!c.uploadFileToServer}"/>
      </div>
      <c:ValidationErrorMessages aura:id="errorInput"/>
      <div aura:id="uploading" class="notUploading hidden">
        <span id="results"></span>
        <img src="{!$Resource.Framework__SLDS_Base+'/img/spinners/slds_spinner_brand.gif'}" alt="uploading" class="small-spinner" />&nbsp;{!v.uploading}
     </div>
</div>

Controller: `

doUpload : function (component,bucket,prefix,fileName,fileType,file,self,uploadCrop) {
$('#' + component.get('v.uniqueId'))[0].contentWindow.postMessage({identifier : component.get('v.uniqueId'),params : params, bucketName : component.get('v.bucket')},'*');
}