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