Better input[type=file]

Upgrade your file inputs to automatically read their selected file(s) in the background. Just include the autoload.js file in your project and you are good to go.

Automatic attachement

The autoload.js will once the DOM is ready find all input[type=file] and attach the needed infrastructure for it to automatically read the file(s) that the user has chosen. This can be either from the input[type=file] or dragged and dropped onto one of its labels.

Every time this happens it creates a new FileReader for each File chosen and starts the reading. Access to this FileReader is provided through a new property reader on the corresponding File.

If you insert any input[type=file] dynamically and want to enable automatic reading, make sure to call FileReader.auto on those elements. It is safe to call it multiple times on the same element. It remembers if it already has been enabled.

Public API

In order to avoid polluting the global namespace autoload.js adds its public API to the native FileReader class as static methods.

FileReader.format

This specifies the default format for automatic file reading. This is the part after readAs on all FileReader instances. The default value is DataURL, see MDN for the full list.

FileReader.auto(HTMLInputElement input, string format = FileReader.format)

This enables automatic file reading for the provided element in the provided format. The latter defaults to FileReader.format, see above.

Events

All events from the native FileReader are broadcasted onto the input[type=file] element that autoload.js is attached to. These all have the event.relatedTarget set to the File object corresponding to the FileReader that originated the event.

This is useful when you have the multiple attribute set, since you then will receive events from more then one FileReader object.

To make it easier to handle multiple files, and to support drag'n'drop, it fires a few extra events. These are CustomEvent and have their detail property set to the FileList for the files chosen by the user.

load-all

This event is triggered after the automatic reading completed successfully for all files.

loadstart-all

This event is triggered as the automatic reading is started.

loadend-all

This event is triggered after the automatic reading is completed for all files. This is independent if the reading was successful or failed.

AngularJS

This also includes a small AngularJS directive that listens on the above events and properly integrates with ngModel so you can just use it as any other input field. Include the directive.js and inject "angular-file-input" into your application.

Dependcies

For the vanilla JavaScript version, it requires the File API and a fairly modern browser. Make sure you test it on all platforms you need to support.

Drag'N'Drop

Because of the way drag'n'drop works, you can't rely on the files property on the input[type] element for the list of files the user has chosen. Instead listen for one of the above custom events which unifies this for you.

License

This code is licensed under MIT, see the LICENSE.md file for details.