2

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?

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.

  • I have seen the known issue article and also raised a case with Salesforce. They are not replying with specific solution as well. I am looking for alternatives. – Santanu Halder Aug 25 '16 at 9:17
  • Unfortunately Salesforce would need to resolve these issues by updating Locker Service. Until that is done you would need to keep Locker Service disabled. Luckily the auto-activation that was scheduled in Winter '17 has now been postponed to Spring '17. – Mark Keats Aug 25 '16 at 9:19
  • Hi, I need help in uploading a file in contentVersion using lightning component. Please refer to below link for details. developer.salesforce.com/forums#!/… ​Thank You. – Muzammil Bajaria Jan 23 '17 at 7:19
1

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')},'*');
}
  • Which properties form file input did you pass to the iframe to determine which file was selected? – Scott Morrison Sep 22 '17 at 17:50

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.