html5Upload

HTML5 multiple files upload JavaScript example for CFML (ColdFusion, Lucee, Railo) using XMLHttpRequest Level 2.

The HTML5 <input> multiple Attribute is not correctly handled by ColdFusion/Lucee's cffile action = "uploadAll" tag or the FileUploadAll functions. This application uses JavaScript to correct the form file submission without the need of library dependencies such as JQuery.

Requirements

• ColdFusion, Lucee or CFML compatible server that supports the cffile action = "uploadAll" tag or the FileUploadAll function.
• A client web browser that supports HTML5, XMLHttpRequest Level 2 and the FormData API. Can I use XMLHttpRequest 2?
• A client web browser that has JavaScript turned on.

Recommendation

• A client web browser with its JavaScript console enabled to view console.log outputs. You can use FireBug in FireFox, DevTools console in Chrome or the Web Inspector console in Safari.

Important!

submit.js in its current form is too verbose as it is intended for debugging and feedback. It should not be used in a production environment without modification.

Usage

1. Download the ZIP html5Upload-master.zip and extract it into the webroot of your CFML server.
2. Edit submit.cfm and make sure the savedUploadsPath variable at line 9 points to a valid directory. This is where the file uploads will be saved.
3. View upload.html in a modern web browser. For a ColdFusion server running on a local machine the URL to do this might be http://localhost:8500/html5Upload-master/upload.html.

How does it work?

The application comes with 3 primary files plus a customized version of BootStrap for some basic HTML5 theming.

• upload.html A standard HTML5 file upload form. One important difference is it uses a JavaScript onclick event to submit the form.
• submit.cfm A typical CFML page that uses the `cffile action = "uploadAll" to receive and save file uploads to the server.
• submit.js Is where the magic happens. It uses XMLHttpRequest to submit the form to the server and handle any responses returned by the server.

When the upload.html Upload files! button is clicked a submit.js startUpload() function is triggered. It has the content of the form passed to it and analyses that content. The function creates a new internal form using the web browser's FormData API and fills it in using the data sourced from the submitted form. Most importantly it creates a new collection of field-names that are compatible with the CFML cffile action = "uploadAll" tag and the FileUploadAll function.

The startUpload() function POSTs the FormData API generated form to submit.cfm using the in-browser XMLHttpRequest() function. submit.cfm treats the POST as a typical form and handles it with the cffile action = "uploadAll" tag. All errors or success messages created by submit.cfm are returned to web browser as HTML tags sent over HTTP. These replies are handled by XMLHttpRequest events contained in submit.js. The events use JavaScript to update the HTML DOM which refresh the client web browser with the updated HTML tags.

Sample screen shots

Upload files without the html5Upload JavaScript

Upload files with debug mode

Uploading aborted

Resources used

• New Tricks in XMLHttpRequest2 by Eric Bidelman
• Html5 File Upload with Progress by Shiv Kumar
• w3schools - The XMLHttpRequest Object
• W3C - File API
• W3C - FormData XMLHttpRequest

Licence

The MIT License (MIT) Copyright (c) 2015 Ben Garrett