Why lightning:fileUpload doesn’t work on public sites?

I’m using lightning:fileUpload inside a lightning component and I’m testing it on a public site, but when I attach a file/files the modal box with the Done button doesn’t show up. When I’m testing that component in the salesforce app builder is running as expected. Why that could happen?

                <lightning:fileUpload label="Attach receipt"
                                      name="fileUploader"
                                      multiple="true"
                                      accept=".pdf, .png"
                                      recordId="{!v.recordId}"
                                      onuploadfinished="{!c.handleUploadFinished}" >
                </lightning:fileUpload>

That means that the onuploadfinished function never executes. The same thing happens if you try to put an HTML tag inside the component (for ex. iframe, input type=”file”).

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

As per documentation(https://developer.salesforce.com/docs/component-library/bundle/lightning:fileUpload/documentation), for the community site user, we need to enable the org preference Allow site guest users to upload files. To enable this, go to Setup > General Settings, and select Allow site guest users to upload files. One more thing this component is not supported in Lightning Out or standalone apps, and displays as a disabled input. So if your site using lightning out to use this component then this will not work.

Method 2

Did the same problem when trying to use LWC file upload on Salesforce sites
why can’t I use ‘markup: // forceContent / *’ in <aura: dependency> of my <aura: application>,
so I can’t use <lightning-file-upload>.

The solution for me was to create my own file upload, maybe it will help you or help someone …

//HTML

<lightning-input type="file" label="File Upload" onchange={saveFileHandle}></lightning-input>

//JavaScript

saveFileHandle(event){
    let fileList = event.detail.files;

    [...fileList].forEach(file => {
        let fileReader = new FileReader();
        file.sObjectId = this.leadId;

        fileReader.onload = function() {
            let fileContents = fileReader.result;
            let base64Mark = 'base64,';
            let dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
            fileContents = fileContents.substring(dataStart);

            saveFile({
                parentId: file.sObjectId,
                fileName: file.name,
                base64Data: encodeURIComponent(fileContents)
            })
            .then(result => {
                alert('Sucess');
            })
            .catch(error => {
                alert('Error');
            });
        };
        fileReader.readAsDataURL(file);
    });
}

//Controller Apex

@AuraEnabled
public static void saveFile(Id parentId, String fileName, String base64Data) { 
    base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');

    //Insert ContentVersion
    ContentVersion contentVersion = new ContentVersion();
    contentVersion.ContentLocation = 'S'; //S-Document is in Salesforce. E-Document is outside of Salesforce. L-Document is on a Social Netork.
    contentVersion.PathOnClient = fileName;//File name with extention
    contentVersion.Origin = 'C';//C-Content Origin. H-Chatter Origin.
    contentVersion.OwnerId = UserInfo.getUserId();//Owner of the file
    contentVersion.Title = fileName;//Name of the file
    contentVersion.VersionData = EncodingUtil.base64Decode(base64Data);//File content
    Insert contentVersion;

    //After saved the Content Verison, get the ContentDocumentId
    Id contentDocumentId = [SELECT ContentDocumentId FROM ContentVersion WHERE Id =:contentVersion.Id].ContentDocumentId;

    //Insert ContentDocumentLink
    ContentDocumentLink contentDocumentLink = new ContentDocumentLink();
    contentDocumentLink.ContentDocumentId = contentDocumentId;//Add ContentDocumentId
    contentDocumentLink.LinkedEntityId = parentId;//Add attachment parentId
    contentDocumentLink.ShareType = 'I';//V - Viewer permission. C - Collaborator permission. I - Inferred permission.
    contentDocumentLink.Visibility = 'AllUsers';//AllUsers, InternalUsers, SharedUsers
    Insert contentDocumentLink;
}

You can adapt your code to the .

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0