Opens a file picker dialog upon being called. Doesn't need a DOM
element or pre-existing <input type="file">.
Note: This component inserts the element when required, so the body element needs to be loaded beforehand.
Note: For security reasons, file-picker must be triggered by an original DOM event (click, touchstart, keyup, etc.). It cannot be called onload or in a timeout.
$ component install component/file-picker
var filePicker = require('file-picker');
// Upload a single file
$('single-link').click(function() {
filePicker(function(files){});
});
// Upload multiple files (on supported web browsers)
$('multiple-link').click(function() {
filePicker({ multiple: true }, function(files){});
});
// Upload a directory (on supported web browsers)
$('directory-link').click(function() {
filePicker({ directory: true }, function(files){});
});
// Accept only image files or .psd files
$('image-link').click(function() {
filePicker({ accept: [ 'image/*', '.psd' ] }, function(files){});
});
Valid options:
multiple (Boolean) whether the user can select multiple files
if the UA supports it (defaults to false).directory (Boolean) whether the user can select a directory
if the UA supports it (defaults to false).accept (String) tell the browser to only allow selecting files
of this type. If several types, you may pass in an array of types. Some examples.The callback fn will only be invoked if the underlying <input>
fires a change event. It will receive the following parameters:
files array from the <input> (not available on IE9).event object.<input> element reference (detached from DOM).MIT