Upload a File as Large as 2GB in Salesforce Using a Visualforce Page

 Listed in Top 20 Salesforce Articles of 2016  by Rainforce (WalkMe) 

http://rainforce.walkme.com/nectar-salesforce-gods-top-20-salesforce-articles-2016/

Recently, we got a requirement in a project to upload a file into Salesforce that could be as large as 2GB, using a Visualforce page. We created a Visualforce page and used the apex:inputFile component, but received an error upon upload because apex:inputFile has a limitation. The largest file size users can upload with Visualforce is 10MB.

This posed a big limitation for the requirement.

We used a different approach to meet this requirement. This is a tricky problem to solve, and needs some jQuery stuff. We decided to use the chatter:feed component in a Visualforce page. This component embeds Chatter in the Visualforce page, and allows users to upload files as large as 2GB as Chatter feed in Salesforce. It’s just as pictured below when we upload a file using this component:

As for keeping track of the files uploaded, we created a custom object and put the feed tracking of this custom object on. Feed tracking needs to be on in order for this object to allow Chatter posting on the object records.

We use the chatter:feed component on the Visualforce page as follows:

<chatter:feed entityId="<ID of the custom object record>" />

For using the chatter:feed component on the Visualforce page, a custom object record must be inserted before loading the Visualforce page. So we can redirect to the File Upload page from a page that will insert the custom object record and will pass the record ID as a URL parameter. Now on the File Upload page we can get a custom object record ID using the following:

<chatter:feed entityId="{!$CurrentPage.parameters.Id}" />

The next step is to show only the “Choose File” button and remove the unnecessary stuff that is being shown with the Chatter component. For this we wrote few lines of jQuery code and then it worked just like the apex:inputFile component.

These are the steps to convert the Chatter component into the “Choose File” button:

1) When we add the chatter:feed component on the Visualforce page, it looks like this:

2) We need to trigger the “File” link on the Chatter component, and the following script will do this:

           $('#publisherAttachContentPost').trigger('click');

Now the Chatter component will look like this:

3) Now the user will need to trigger the “Upload a file from your computer” link, and the following script will work:

            $('#chatterUploadFileAction').trigger('click');

Now the Chatter component will look like this:

4) After going through the above steps, the user can see the “Choose File” button. But there will also be unnecessary links and buttons shown. The following script will remove all unnecessary stuff:

$('.uploadFileSizeLimit').hide();           

$('.contentPublisherSlideDown.customPanel.alignTop').css('border', '0');

$('.clearContentPanelButtonContainer').hide();

$('.publisherFeedItemTypeChoices').hide();      

$('.cxfeedinnerwrapper').hide();  

$('.publisherBottomBarPlaceholder').hide();

$('.publisherTextAreaPlaceholder.alignCenter').hide();

Now the Chatter component will look like this:

5) Finally, the Chatter component looks like the apex:inputFile button. Using this button, the user can select any file from their computer. But now, the user will need a button that will upload/insert a file with a custom object.

In order to make this possible, create a button on a Visualforce page and with onclick on this button run the following script:

if($('.file')[1].files.length > 0){

                   $('#publishersharebutton').trigger('click');

}else{

                   alert('Please select a file');

}            

The above script will trigger the “Share” button of the Chatter component and the file will be uploaded on Salesforce.

6) Then we added some more CSS stuff with this upload file functionality. Finally, it looks like this:

With the above tricks and a few lines of code, a user can upload a file as large as 2GB on Salesforce using a Visualforce page, whereas apex:input only allows users to upload files up to 10MB. Now users can access uploaded files by querying the FeedItem for the custom object we created.

Happy coding!