JarCastingfile-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
npm install file-dialogimport fileDialog from 'file-dialog'orconst fileDialog = require('file-dialog')
Note: If you want to support older browsers make sure you have babel enabled.
Classic <script> includes
- Include minified file-dialog.min.js via
<script> - 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
})