While uploading the multiple files at the same time you may have faced the problem like ‘View state size limit exceeded’, ‘Heap size’ limit and file size limit. To overcome these limits we can use javascript to handle the file uploading through the Visualforce page.

I have also faced the problem like View state size limit exceeded and Heap size limit, to solve the issue I decided to send/upload the files using HTTP POST Request with the help of Ajax, Jquery, javascript. Below is the code snippet for uploading files in the ContentVersion object.

On ‘Upload’ button click this method will be called. Here ‘#uploadBtn’ is the id of the button.

$(‘#uploadBtn’).click(function() { …}
If the user selects multiple files, Iterating over files length.

for (var i = 0; i < v.files.length; i++) { … }
In every iteration uploadSelectedFile, JS function will be called.

uploadSelectedFile(v.files[i], function(err, res){ …}
Reading the files and converted into the base64 format.

filetoBase64(file, function(err, content){ }
ContentVersion object variable with required fields.

var conVer_object = {
ContentLocation : ‘S’,
VersionData : content, // File body
PathOnClient : file.name, // File name
Title : file.name //File title
};
This AJAX method used to perform the asynchronous HTTP request to Salesforce.

$.ajax({ … }
URL or Endpoint: HTTP POST method will post the content to the specified location (ContentVersion object).

url: ‘/services/data/v39.0/sobjects/ContentVersion’,
Header: Salesforce Session_ID used for authentication.

headers: {‘Authorization’: ‘Bearer {!$Api.Session_ID}’, ‘Content-Type’: ‘application/json’},
XML HttpRequest object: Send the data from page to server (Salesforce) in the background.

var xhr = new window.XMLHttpRequest();

The addEventListener function listen to the progress of uploading.

xhr.upload.addEventListener(“progress”, function(evt){ … }
These lines of code will display the Progress bar on the page.

$(‘#progress_bar_container’).css(‘display’, ‘block’);
var percentComplete = evt.loaded / evt.total;
console.log(‘percentComplete ‘+percentComplete );
var percentCompletex= percentComplete*100;
$(‘#percentText’).html(“Uploading. Please wait… “+Math.round(percentCompletex)+”%”);
$(‘.progress’).css(‘width’, percentCompletex+ “%”);
if(percentCompletex == 100){
$(‘#progress_bar_container’).css(‘display’, ‘none’);
}

This success function will return the success message with the ids of the file that just uploaded.

Output:

References:

XML Http Request

AJAX Method

ContentVersion

Hope this blog post will help many.

Happy coding…