I need to call a Lightning component which uses lightning:fileUpload to upload multiple files from a Visualforce Page.

But for calling a Lightning component from a Visualforce Page, I need to use a Lightning out App and Lightning out App doesn't support lightning:fileUpload.

Is there any way/workaround by which you can use lightning:fileUpload from a Visualforce Page?


<apex:page standardController="Opportunity" extensions="LightningOutDemoCtrl">
<apex:includeLightning />

<div id="CardContainer" >

    var Id = '{!$CurrentPage.parameters.Id}';
    $Lightning.use("c:LightningComponentFromVFApp", function() {
                                       recordId : Id
                                   function(cmp) {
                                       console.log('Component created');


public class LightningOutDemoCtrl {

public Id recordId{get;set;}

public LightningOutDemoCtrl(ApexPages.StandardController stdcontroller){
  recordId = ApexPages.currentPage().getParameters().get('id');
  System.debug('Record Id is: '+recordId);


<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:NewFileUpload"/>


    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    This is New File Upload component.
    <aura:attribute name="recordId" type="Id"/>
    <lightning:fileUpload label="Upload File" multiple="true" recordId="{!v.recordId}" aura:id="multifileUpload" onuploadfinished="{!c.handleUploadFinished}" />



handleUploadFinished: function (cmp, event) {
    //Get the list of uploaded files
    var uploadedFiles = event.getParam("files");
    //Show success message – with no of files uploaded
    var toastEvent = $A.get("e.force:showToast");
        "title": "Success!",
        "type" : "success",
        "message": uploadedFiles.length+" files uploaded successfully!"


    //Close the action panel
    var dismissActionPanel = $A.get("e.force:closeQuickAction");

The upload files button is visible but the files are not uploaded after selecting them.

Upload Files

Edit: There are commandButtons on another Visualforce Page(OpportunityDetailVF.vfp). On click of any of these buttons, I need to open Lightning multiple file upload.

For calling Lightning multiple file upload, I need a Visualforce Page(LightningOutDemo.vfp) which uses Lightning Out dependency to call the lightning component (NewFileUpload.cmp).


<apex:page standardController="Opportunity" extensions="opportunityDetailCtrl">

    <apex:form >
     <apex:commandButton action="{!callVFPage}" value="Click Here"/>         



    public class opportunityDetailCtrl {

    public opportunityDetailCtrl(ApexPages.StandardController stdController){

    public PageReference callVFPage(){

        PageReference pr = new PageReference('/apex/LightningOutDemo');
        return pr;
  • is the VF page in classic or lightning? ALso do you see any errors in console.log? Mar 21, 2019 at 9:08
  • The VP page is in Lightning and there are no errors in console. Mar 21, 2019 at 9:34
  • Why dont you use normal html input type file in VF page? What is your functionality? If you want to use VF page as a whole for the upload functionality why did you use a lightning component and again using VF page to call it?
    – 7'7'
    Mar 21, 2019 at 10:09
  • I have edited the post explaining the requirement. If I use HTML input file, I will have to manually save all the files attached to ContentDocument object which is not recommended. I have to use the Standard functionality of lightning multiple file upload. Mar 21, 2019 at 11:21


You must log in to answer this question.