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"/>
        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");

Aura App

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

LWC Html

<lightning-input label="" 


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

    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();
    this.fileReader.onloadend = (() => {
        this.fileContents = this.fileReader.result;
        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 


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.fileName = this.fileName + ' - Uploaded Successfully';
        this.UploadFile = 'File Uploaded Successfully';
        this.isTrue = true;
        this.showLoadingSpinner = false;

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

    .catch(error => {
        // Showing errors if any while inserting the files
            new ShowToastEvent({
                title: 'Error while uploading File',
                message: error.message,
                variant: 'error',

Apex Method

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


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! Jan 8 '20 at 20:37
  • @Exterasmors It should? Could you include some sample code in your question?
    – sfdcfox
    Jan 8 '20 at 20:47
  • I've added sample code Jan 8 '20 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! Jan 9 '20 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.