Utilization of Generic Lightning Component to Upload Large Multiple Images
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.
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.
You can refer forcetk documentation over here:
This implementation used Lightning and Visualforce page communication using window.postMessage: