Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

114
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda