0

Is FileReader available when using Lightning Out or LWC on a VF page? Official Salesforce documentation says that Lightning-File-Upload cannot be used in Standalone and Lightning Out Apps, but I haven't seen anything that says FileReader cannot be used.

I have a Lightning Web Component on a VF page, and when I try to use the FileReader Object, nothing happens when I try to read the file. I don't get an error, no console messages are logged, but I can continue on with whatever I'm doing.

When I place this same Lightning Web Component on a page without it being on a Visualforce page, I have no issues. I get error messages and everything.

If it's not possible to do use FileReader, is there any alternative to FileReader and the Lightning-File-Upload component that I might be able to leverage?

EDIT with code

<apex:page id="Page" tabstyle="PBO__c" standardController="PBO__c" extensions="PBOController">
    <apex:includeLightning />

    <div id="lightning"/>
    <script>
        var recordId = '{!PBO__c.Opportunity__c}';
        $Lightning.use("c:PBOApp", function() {
            $Lightning.createComponent("c:lwcPBOLookup", {recordId: recordId}, "lightning", function(cmp){
                console.log("lwc was created");
            });
        });
    </script>
</apex:page>

Aura App

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:lwcPBOLookup"/>
</aura:application>

LWC Html

<lightning-input label="" 
  name="file" 
  onchange={handleUploadFinished} 
  type="file">
</lightning-input>
{fileName}

LWC JS

handleUploadFinished(event){
    console.log(event.target.files);
    if(event.target.files.length > 0) {
        this.uploadedFile = event.target.files;
        this.fileName = event.target.files[0].name;
    }
}

submit(event){
    console.log("Before everything");
    if(this.uploadedFile.size > this.MAX_FILE_SIZE){
        console.log("File size too large");
    }
    console.log("Before fileReader");
    this.fileReader= new FileReader();
    console.log(this.fileReader);
    this.fileReader.onloadend = (() => {
        this.fileContents = this.fileReader.result;
        console.log(this.fileContents);
        let base64 = 'base64,';
        this.content = this.fileContents.indexOf(base64) + base64.length;
        this.fileContents = this.fileContents.substring(this.content);
        console.log("Save To File");
        // call the uploadProcess method 
        this.saveToFile();
    });

    this.fileReader.readAsDataURL(this.file);
}

saveToFile() {
    console.log("In save to file");
    saveFile({ idParent: this.recordId, strFileName: this.file.name, base64Data: encodeURIComponent(this.fileContents)})
    .then(result => {
        console.log('result ====> ' +result);
        // refreshing the datatable
        this.getRelatedFiles();

        this.fileName = this.fileName + ' - Uploaded Successfully';
        this.UploadFile = 'File Uploaded Successfully';
        this.isTrue = true;
        this.showLoadingSpinner = false;

        // Showing Success message after file insert
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success!!',
                message: this.file.name + ' - Uploaded Successfully!!!',
                variant: 'success',
            }),
        );

    })
    .catch(error => {
        // Showing errors if any while inserting the files
        console.log(error);
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error while uploading File',
                message: error.message,
                variant: 'error',
            }),
        );
    });
}

Apex Method

@AuraEnabled
public static ContentVersion saveFile(Id idParent, String strFileName, String base64Data) {
    // Decoding base64Data
    base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');

    // inserting file
    ContentVersion cv = new ContentVersion();
    cv.Title = strFileName;
    cv.PathOnClient = '/' + strFileName;
    cv.FirstPublishLocationId = idParent;
    cv.VersionData = EncodingUtil.base64Decode(base64Data);
    //cv.IsMajorVersion = true;
    Insert cv;
    return cv;
}

The last log i get in Console is just the FileReader before

0

Yes, FileReader is supported. Here's a simple Playground example. You can see the available APIs in the Locker API Viewer.

  • I'm not sure if I'm using the wrong term, but does this work for Lightning Out as well? I can get it to work on its own on a record page. But if i place it on a Visualforce(is this Lightning Out?) page with an aura dependency, it suddenly doesn't work. Thanks for the quick answer as well! – Exterasmors Jan 8 at 20:37
  • @Exterasmors It should? Could you include some sample code in your question? – sfdcfox Jan 8 at 20:47
  • I've added sample code – Exterasmors Jan 8 at 21:17
  • You are right, it should work. I did a little more digging and out here developer.salesforce.com/docs/atlas.en-us.lightning.meta/… that it works for Lightning out. I'll look into this more, I'm probably just doing something incorrectly within my javascript. Thanks! – Exterasmors Jan 9 at 16:10

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.