Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

116
Views
How to use Lightning Web Component inside Visual Force Pages?

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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:

enter image description here

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:

enter image description here

pay attention Lightning Out / Visualforce is missing here. This works correctly only in lightning experience, mobile app, and in community.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!