How to use Lightning Web Component inside Visual Force Pages?

Question

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.

score 1 · Answer 1 · answered Nov 18 '21 at 15:06

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.

How to use Lightning Web Component inside Visual Force Pages?

1 Answers1