Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

117
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda