File picker component
Last updated 6 years ago by tootallnate .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install component-file-picker 
SYNC missed versions from official npm registry.

File Picker

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() {

// 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){});


filePicker(opts, fn)

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:

  • The files array from the <input> (not available on IE9).
  • The change event object.
  • The underlying <input> element reference (detached from DOM).

Browser support

  • Internet Explorer 9+
  • Firefox
  • Chrome
  • Opera
  • Safari
  • Mobile Safari
  • Android Browser



Current Tags

  • 0.2.1                                ...           latest (6 years ago)

1 Versions

  • 0.2.1                                ...           6 years ago
Maintainers (1)
Today 1
This Week 1
This Month 14
Last Day 0
Last Week 10
Last Month 64
Dependencies (1)
Dev Dependencies (0)

Copyright 2014 - 2016 © |