Utilization of Generic Lightning Component to Upload Large Multiple Images
Why ?
Salesforce provides a standard lightning base component called lightning:fileupload to upload files in Salesforce. However, it gives a different experience than that of the file upload feature provided typically by other Apps or Platforms i.e., It directly uploads the files, and then you click on the Done button. Then to have it added to the chatter of a record, we have to add it explicitly. They either provide a preview before the file is uploaded to the server or a way to preview the uploaded files such that they can delete a file they wanted to upload it in case.
What ?
For providing a familiar experience for uploading files and with no efforts for uploading the same file to chatter, we designed a lightning component which allows uploading multiple files from Mobile as well as a desktop with better UI & experience. It looks something like below:
Salesforce Lightning View :
Salesforce 1 App View :
How we implemented this?
We created a generic lightning component that implements hasRecordId interface which provides Id of the current record in the recordId attribute. This helps using this component as a Quick Action on all supported objects. For this component, there is a technical challenge that we faced, and upon exploring, we found a way to do it. Processing file data inside Apex is a little complex since large files are in the picture then Apex heap size errors are expected. Apex cannot process file when files size is of approx. 4.5MB or more. Traditionally, most of the developers do it with ChatterAPI through Visualforce. However, to make it working in lightning becomes harder; hence, developers approach lightning:fileUpload base component.
We built up this flow by handling the heavy lifting of the file data in javascript using javascript forcetk library. Forcetk library consumes APIs in Salesforce and provides a way to create File (ContentDocument) and other object records in Salesforce through javascript. This altogether allows overcoming dependency on lightning:fileUpload as well as uploading multiple large files in a single click.
You can refer forcetk documentation over here:
https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit
This implementation used Lightning and Visualforce page communication using window.postMessage:
Bottom line is we can upload multiple images of large size using a combination of lightning component, visualforce page, and forcetk javascript library.
