npm install component-file-picker Opens a file picker dialog upon being called. Doesn't need a DOM
element or pre-existing .
__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
``js
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 filesfalse
if the UA supports it (defaults to ).directory
- (Boolean) whether the user can select a directoryfalse
if the UA supports it (defaults to ).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
fires a event. It will receive the following parameters:
- The files array from the (not available on IE9).event
- The change object.` element reference (detached from DOM).
- The underlying
- Internet Explorer 9+
- Firefox
- Chrome
- Opera
- Safari
- Mobile Safari
- Android Browser
MIT