3

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?

LightningOutDemo.vfp

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

<div id="CardContainer" >

</div>
<script>
    var Id = '{!$CurrentPage.parameters.Id}';
    console.log(Id);
    $Lightning.use("c:LightningComponentFromVFApp", function() {
        $Lightning.createComponent("c:NewFileUpload",
                                   { 
                                       recordId : Id
                                   },
                                   "CardContainer",
                                   function(cmp) {
                                       console.log('Component created');
                                   });
        });
</script>

LightningOutDemoCtrl.apxc

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);
 }
}

LightningComponentFromVFApp.app

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

NewFileUpload.cmp

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

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

</aura:component>

NewFileUploadController.js

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

    $A.get('e.force:refreshView').fire();

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

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).

OpportunityDetailVF.vfp

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

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

</apex:page>

opportunityDetailCtrl.apxc

    public class opportunityDetailCtrl {

    public opportunityDetailCtrl(ApexPages.StandardController stdController){

    }
    public PageReference callVFPage(){

        PageReference pr = new PageReference('/apex/LightningOutDemo');
        return pr;
    }
}
4
  • is the VF page in classic or lightning? ALso do you see any errors in console.log? Commented Mar 21, 2019 at 9:08
  • The VP page is in Lightning and there are no errors in console. Commented 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'
    Commented 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. Commented Mar 21, 2019 at 11:21

1 Answer 1

-1

The only option as far as I have came across is to use normal HTML input type=file and handling the upload in js itself. Then you would have to use some custom styles to make it look like a lightning upload using ::file-selector-button

2
  • The question clearly states: "Lightning out App doesn't support lightning:fileUpload". The OP is hardly unaware of the basic input type file. So what's the point of this answer? Commented Nov 1, 2023 at 11:04
  • Yes, I was just making the point clear that it is not possible. Also I recently tried the same thing and the only option I had was that, by which I could have multiple file upload and sizes more than 10mb. And also if it doesn’t help this particular person,it can be helpful for others who come across this situation. Hope you understand the point. Commented Nov 4, 2023 at 12:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .