Lightning Web Components: lightning-input file type vs lightning-file-upload for file size greater than 25 MB and less than 100 MB

After Winter 19 release, API calls can't be made from client-side Aura/LWC component. You have to make API calls from server-side controllers rather than client-side code irrespective of whether it is a CSP Trusted Site.

In such scenarios where custom file upload is required when file size is needed to restrict with less than 100 MB and more than 25 MB. As of now such requirements can't be implemented. Apex has limit of 4 MB file upload. And chatter rest api can't be used directly on client side controller. Then what all options are left?

Lightning-file-upload is the only option left to upload bigger size file. However it can't be customized.

In my requirement, I am to share public url of  uploaded file on chatter. Attaching code:

Component Bundle:

• fileUpload (Base component)
• PostChatterLWCController (Apex class)

Add the component in detail page.

Refrences:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_api_calls_platform.htm

http://merfantz.com/blog/how-to-create-csp-trusted-sites-in-salesforce

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/csp_trusted_sites.htm

https://www.html5rocks.com/en/tutorials/cors/

** components are created as a part of proof of concept. it can be modified and optimized as per requirement.**

Snippets:

Code:

fileUpload.html

<template>

    <lightning-card title='File Upload' icon-name="custom:custom19">

        <lightning-input name="Expose to public" label="Expose to public" type="checkbox" data-id="checkbox"></lightning-input>

        <lightning-file-upload

                label="Attachments"

                name="fileUploader"

                accept={acceptedFormats}

                record-id={recordId}

                onuploadfinished={handleUploadFinished}

                multiple>

        </lightning-file-upload>

    </lightning-card>

</template>

fileUpload.js

import { LightningElement, api } from 'lwc';

// imported to show toast messages

import {ShowToastEvent} from 'lightning/platformShowToastEvent';

import postChatter from '@salesforce/apex/PostChatterLWCController.postChatter';

export default class fileUpload extends LightningElement {

    @api recordId;

    // accepted parameters

    

    get acceptedFormats() {

        return ['.pdf', '.png','.jpg','.jpeg','.mkv'];

    }

    cdIdArrays =[];

    handleUploadFinished(event) {

        let strFileNames = '';

        

        // Get the list of uploaded files

        const uploadedFiles = event.detail.files;

        for(let i = 0; i < uploadedFiles.length; i++) {

            strFileNames += uploadedFiles[i].name + ', ';

            this.cdIdArrays[i] = uploadedFiles[i].documentId;

        }

        //console.log('cd>>'+cdIdArrays[0]+' '+cdIdArrays[1]);

        this.dispatchEvent(

            new ShowToastEvent({

                title: 'Success!!',

                message: strFileNames + ' Files uploaded Successfully!!!',

                variant: 'success',

            }),

        );;

        const checkbox = this.template.querySelectorAll('[data-id="checkbox"]');

        if(checkbox[0].checked){

            this.doPostChatter();

        }     

    }

    doPostChatter(){

        postChatter({parentRecordId : this.recordId ,contendDocIdList: this.cdIdArrays}).then((con) =>{

            this.results = con;

            console.log('datatable>>'+this.results);

        }).catch((error) =>{

            this.showToast('ERROR', error.body.message, 'error');

        })

    }

}

PostChatterLWCController.cls

public inherited sharing class PostChatterLWCController {

    

    @AuraEnabled

    public static void postChatter(Id parentRecordId, List<Id> contendDocIdList){

    

        List<ContentVersion> cvList = [select id,contentdocumentid from contentversion where contentdocumentid IN: contendDocIdList];

        List<ContentDistribution> cdList = new List<ContentDistribution>();

        for(ContentVersion idObj : cvList){

            ContentDistribution cd = new ContentDistribution();

            cd.Name = 'Doc'+idObj.contentdocumentid;

            cd.ContentVersionId = idObj.id;

            cd.PreferencesAllowViewInBrowser= true;

            cd.PreferencesLinkLatestVersion=true;

            cd.PreferencesNotifyOnVisit=false;

            cd.PreferencesPasswordRequired=false;

            cd.PreferencesAllowOriginalDownload= true;

            cdList.add(cd);

        }

        insert cdList;

        List<FeedItem> FeedItemList= new List<FeedItem>();

        List<ContentDistribution> ContentDistributionList= [Select id, ContentDocumentId, DistributionPublicUrl, ExpiryDate FROM ContentDistribution WHERE ContentDocumentId IN: contendDocIdList];

        for(ContentDistribution cdObj: [Select id, Name, ContentDocumentId, DistributionPublicUrl, ExpiryDate FROM ContentDistribution WHERE ContentDocumentId IN: contendDocIdList]){

            FeedItem post = new FeedItem();

            post.parentid = parentRecordId;

            post.Body = UserInfo.getUserId()+' has posted public link to the doc: '+cdObj.Name+' Link: '+cdObj.DistributionPublicUrl;

            FeedItemList.add(post);

        }

        insert FeedItemList;

    }

}