Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including component-file-picker with all npm packages installed. Try it out:

var componentFilePicker = require("component-file-picker")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

component-file-picker v0.2.1

File picker component

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



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free