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 400,000 packages pre-installed, including file-dialog with all npm packages installed. Try it out:

var fileDialog = require("file-dialog")

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

file-dialog v0.0.8

Call the file dialog directly in your code

file-dialog

npm version PRs Welcome

Directly call the file browser dialog from your code, and get back the resulting array of FileList. Handy for when you need to post files via AJAX/Fetch. No more hacky hiding of <input type="file"> elements. Support for Callbacks & Promises!

  • Supports CommonJS, AMD, and global
  • No JQuery needed, tiny (1.25 KB), with no dependencies
  • Supports selecting multiple files and the file type 'accepts' attribute (see examples below)
  • Support for all major browsers

alt text

Install

For Webpack/Browserify projects...

  1. npm install file-dialog --save
  2. Require it const fileDialog = require('file-dialog') or with ES6 modules import fileDialog from 'file-dialog'
  3. Note: If you want to support older browsers make sure you have babel enabled.

Classic <script> includes

  1. Include minified file-dialog.min.js via <script>
  2. Module is binded to the global variable fileDialog

Examples

Get a File via a promise and POST to server via Fetch

    
fileDialog()
    .then(file => {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

        // Post to server
        fetch('/uploadImage', {
            method: 'POST',
            body: data
        })
    })

Allow user to select only an image file

    
fileDialog({ accept: 'image/*' })
    .then(files => {
        // files contains an array of FileList
    })

Allow user to select only images or videos

    
fileDialog({ accept: ['image/*', 'video/*'] })
    .then(files => {
        // files contains an array of FileList
    })

Allow user to select multiple image files at once

    
fileDialog({ multiple: true, accept: 'image/*' })
    .then(files => {
        // files contains an array of FileList
    })

Classic callback version of the above

    
fileDialog({ multiple: true, accept: 'image/*' }, files => {
    // files contains an array of FileList
})

Metadata

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