alnorris / file-dialog

Trigger the upload file dialog directly from your code easily.

file-dialog

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 ES6 Modules, CommonJS, AMD, and global
• Supports selecting multiple files and the file type 'accepts' attribute (see examples below)
• Support for all major browsers
• No jQuery needed, tiny (1.25 KB), with no dependencies

Install

Supports both CommonJS and ES6 Modules

1. npm install file-dialog
2. import fileDialog from 'file-dialog' or const fileDialog = require('file-dialog')

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
})