I want to achieve file upload functionality in LWC component through Visual force page. Here, my visual force page code
My Apex Page, Aura Application, HTML an JS code :
<apex:page showheader="false" sidebar="false">
<apex:includelightning />
<div id="LightningComponentid" />
<script>
$Lightning.use("c:aH_UDC_AmadeusFileUpload_POC", function() {
$Lightning.createComponent("c:aH_UDC_FileUploadLWC_POC",
{
recordid : "{!$CurrentPage.parameters.id}",
},
"LightningComponentid", // the Id of div tag where your component will be rendered
function(cmp) {
console.log('Calling the LWC Component');
console.log('record id : ' + "{!$CurrentPage.parameters.id}");
});
});
</script>
</apex:page>
import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class AH_UDC_FileUploadLWC_POC extends LightningElement {
@api recordId;
get acceptedFormats() {
return ['.TXT', '.BMP', '.JPEG', '.PNG', '.PDF', '.XLS', '.DOC', '.DOCX', '.XLSX', '.JPG', '.MSG', '.PPT', '.PPTX', '.GIF', '.SVG', '.EPS', '.CDR', '.ZIP','.bak'];
}
handleUploadFinished(event) {
// Get the list of uploaded files
const uploadedFiles = event.detail.files;
let uploadedFileNames = '';
for(let i = 0; i < uploadedFiles.length; i++) {
uploadedFileNames += uploadedFiles[i].name + ', ';
}
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
variant: 'success',
}),
);
}
}
<aura:application extends="ltng:outApp" access="Global">
<aura:dependency resource="c:aH_UDC_FileUploadLWC_POC"/>
</aura:application>
<template>
<lightning-card title="LWC File Upload Example" icon-name="custom:custom19">
<lightning-file-upload label="Attach receipt"
name="fileUploader"
accept={acceptedFormats}
record-id="aAp290000004Nn2CAE"
onuploadfinished={handleUploadFinished}
multiple>
</lightning-file-upload>
</lightning-card>
</template>
lightning-file-upload is not working properly. what is missing in code? Please help me.
This is expected behavior, unfortunately. Each standard lwc component has documentation, that explains where this component can work as expected. Because you are using aura as a parent container for lwc, check aura documentation for the component, for example lightning:button. Targets are saying:
pay attention Lightning Out / Visualforce is present here. That means this component will work embedded in VF page.
However, file:Upload has limited set of targets:
pay attention Lightning Out / Visualforce is missing here. This works correctly only in lightning experience, mobile app, and in community.