How to upload multiple files to a SalesForce object from JavaScript?

Share on

If there is a requirement to upload multiple files (in the form of images, PDF files or videos) along with a form on a VisualForce page, there can be multiple challenges that the users might face. Here are the challenges and how we can overcome them using JavaScript.

Challenges when uploading multiple files on a VisualForce page – 

* When you use a standard visual force component, you will need to limit the number of attachments in advance. Also, there is the ‘View’ state limit.

* Since the attachments are a child to a parent object, we would need to insert the parent object and get the id before inserting the attachments, which may require multiple clicks from the user.

* Javascriptremoting calls are asynchronous in nature. The attachment object body is a string, The String in Salesforce has a limit of 6,000,000 characters.

In order to overcome the above challenges, an easy approach could be implemented using javascriptremoting. Since there is no limit in the number of javascriptremoting calls, we could split up the file into chunks and upload them individually. Javascriptremoting calls can be made synchronous by calling the next functional call in the callback of the first.

We could start off by submitting the form details in the first remote call to submit the record which returns a parent id. Then the callback triggers the upload files function like below.






Share on