[SalesForce] File Reader on Lightning Web Component

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

Best Answer

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

Related Topic