Alex Berg

Salesforce MVP Brings Multi-file Uploading to Salesforce

Jason Venable, a Salesforce MVP since Spring ‘11, has been a well-known member of the Force.com community, due to his help on the Force.com Boards and his blog posts. He’s announced a working beta of a multi-file uploader component for Salesforce, complete with open source code on GitHub and a blog post with details of the many problems that needed to be solved to make this component a reality.

This had me pretty excited, so I had to read his code to see how he accomplished it. However, we must remember that this is still ‘beta’ software since there are still a few issues and incompatibilities, as he details on his blog post:
1) Doesn’t work in Internet Explorer or Safari
2) Heap limits prevent files larger than ~1.27MB from being uploaded.

Impossible Until Now?

Why hasn’t this been done on Salesforce before now? Well, many implementations of multi-file upload like this requires special support on the server side. The “server side” for Salesforce users is the Salesforce platform, which is tightly secured and offers limited programmatic functionality, though increasing. Because of limitations like this, a solution had to be written custom to the platform.

What building blocks are now available that makes this project possible? Chrome and Firefox have respectable support for HTML5 features, and the enabling HTML5 feature used here is the File API. Browsers that support the File API provides a Javascript object called FileReader that facilitates to JS scripts advanced file reading, file slicing, and upload progress.

Solution Basic Overview

In his blog post, Jason has a pretty great overview of the problems he encountered, as well as the solutions, which are all pretty interesting. The rest of this post details how the code works, so if you want to understand the code, read on.

The solution is pretty much all Javascript, wrapped in a component, which has an Apex controller on the backend. The logic starts when the ‘Upload’ button is clicked, which sets up the file upload indicator DOM elements by calling the prepareForUploads function.

Where does the file chunking/slicing happen? First, the checkForUpload function creates an array of bytes that represent each chunk of the file to upload. Then, the processByteChunkArray function uses this array to slice a chunk of data from the file and send it to the controller by using Javascript Remoting.

And how is the file rebuilt on the server? The controller either creates or updates the Attachment record in Salesforce, depending on whether the file exists. If the file exists, the Attachment is queried from the database, the new chunk is appended to the end of the file, and the one-chunk-larger file is placed back into the database to be again appended with another chunk, if more remain. Mission complete! Note that because a JS Remoting call, SOQL query, and DML operation is made for each chunk, it’s best to to reduce the number of chunks by making the chunk size relatively large.

To wrap this post up, while the code is not as functional as I would like, it has the algorithm complete. The code does need to be cleaned up a bit, but Jason opened up the source code for contributions, so polishing it up is our job as fellow developers, isn’t it? This multi-file uploader component is still beta, so it has not been packaged and uploaded to the App Exchange, but the code is available on GitHub for developers to use and contribute to. Congrats to Jason for the awesome work!

Posted in: Salesforce