The Drag 'n' Drop Multi File Uploader

Trongate gives developers a powerful, best in class drag 'n' drop, multi-file uploader.  If there's a drag 'n' drop multi-file uploader that's easier to use and more performant then best of luck finding it!  Check out this video test and see for yourself how Trongate's multi-file uploader outperforms the two market-leading alternatives.  

How Does It Work?

When you use the Trongate Desktop App to create a multi-file uploader, a module named 'trongate_filezone' is automatically created and added to your 'modules' folder.  The trongate_filezone module contains all the code required for a secure and fully functional drag and drop, multi-file uploader.  This includes:

• a PHP (controller) file
  
• a CSS file (stored inside 'assets')
• a JavaScript file (also stored inside 'assets')
• full token-based security

What Makes It So Fast?

If you'd like to know the secrets of how Trongate manages to whoop the best uploaders that the JavaScript community has to offer then here's your answer:

Trongate is on a mission to make PHP great again.

An important part of making PHP great again involves addressing and challenging some of the misconceptions that have been circulating, regarding what PHP is capable of.  For example, there appears to be an inexhaustible supply of articles and YouTube videos where the poster will eagerly tell you that PHP is not capable of doing more than one task at a time.  Usually, this kind of information appears in blog posts and videos that have a title, along the lines of, '[something] vs PHP'.

Often, this kind of content will use words and phrases like:

• Synchronous vs Asynchronous
  
• Single-threaded vs Multi-Threaded
• Concurrency

More often than not, this kind of language is designed to dazzle the viewer and hammer home the message that PHP can only do one task at a time.  Rarely, if ever, do you see PHP critics mentioning PHP's JIT compiler, PHP's dominance of server-side technology or any recognition of the fact that PHP operates at more than twice the speed of alternative technologies like Python and Ruby.

In the case of the multi-file uploader, our goal is to upload several pictures as quickly as possible, ideally at the same time.

Trongate manages to achieve this by calling upon a little help from JavaScript and, specifically, by using JavaScripts most powerful feature - setTimeout().

SetTimeout - The Most Powerful Feature In All Of JavaScript

Ask any developer what JavaScript's setTimeout() feature does and there's a good chance they'll tell you that it enforces a time delay, before executing another task.

Here's how some well-known authorities of the web define or describe setTimeout().

W3Schools: "The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds."

The Mozilla Documentation: "Execute[s] a specified block of code once after a specified time has elapsed."

SitePoint: "The native JavaScript setTimeout function calls a function or executes a code snippet after a specified delay (in milliseconds)."

Free Code Camp: "setTimeout() is used to delay the execution of the passed function by a specified amount of time."

As you can see, all of these sources are basically saying the same thing.  They're all saying that setTimeout():

• causes a time delay
  
• then lets the script move forward and do something else

What they're saying is technically correct.  However, setTimeout() has a special 'off label' use that has nothing whatsoever to do with time delays.  It's like a magical secret power that few people understand.  It's also one of the reasons why Trongate's multi-file uploader is so fast.

So, what is setTimeout()'s magical secret power?

Simple!

Every time you call setTimeout(), a new, parallel thread is created!

When you use the Trongate multi-file uploader, the act of choosing files to be uploaded and dropping (or hitting 'Upload') triggers a loop (in JavaScript) that iterates through all of the selected files.  Each loop cycle invokes a setTimeout() command with a tiny time gap of one hundred milliseconds.  Within each loop is a request to query an HTTP endpoint that has been designed to process submitted images.  This creative use of setTimeout() gives PHP an opportunity to process and upload multiple images at the same time.

The one hundred milliseconds time delay (for each HTTP request) is fairly generous.  A hundred milliseconds is a tenth of a second which, in computing terms, is ages!  Whilst there's a case for reducing this gap and making the uploader even more performant, extensive tests indicated that a tenth of a second is something of a sweet spot.  If the time had been any greater then Trongate's multi-file uploader would be in danger of being overtaken by Dropzone (which is incredibly fast).  However, less than a tenth of a second would have created a genuine risk of having some servers crashing in instances where lots of files are submitted at one time.

Is It Possible To Modify Endpoints For Multi-image Uploaders?

Yes!

Each image that gets processed by the multi-file uploader ultimately reaches an endpoint that operates with the same basic principles as Trongate's single picture uploader.

If you open up the Trongate_filezone.php (controller file) inside your text editor, you'll find a method named 'upload'.  This upload() method, is the endpoint for images that are to be uploaded (with the multi-file uploader).

From here, you'll see a reference to api_auth();

api_auth();

The api_auth() method instructs Trongate to follow the authorisation rules that have been defined inside trongate_filezone's api.json file. 

By default, the authorization rules (for the multi-image uploader) are simply that the user should have a role (or 'user level') of 'admin'.  However, it's easy to change these rules to suit your own needs.  Even extremely complicated authorization rules can be integrated with the usage of before hooks and after hooks.

Therefore, if you are interested in modifying who has access to the multi-file uploader endpoints then the upload() method is a good place to start!

Adding Custom Checks To Submitted Images

Modifying authorization rules is one thing but perhaps you'd like to test images that have been submitted before allowing them to be uploaded.  For example, perhaps you'd like to test for things like:

• all images must be below a certain filesize
• all images must have dimensions that fall below a certain width and/or height
• all images must be of the type .png, .gif or .jpg

All of this, and more, is possible.  

Continue onto the next page for information about how to customise the behaviour of your multi-file uploaders.