alnorris / file-dialog Goto Github PK

Trigger the upload file dialog directly from your code easily.

JavaScript 100.00%

file-dialog's Introduction

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

npm install file-dialog
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

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

file-dialog's People

Contributors

Stargazers

Watchers

Forkers

anwerso weyert lehasvv2009 viviivanov timbuckley jasonbarry demchuk-alex gr33nbl00d ybnd janklug curtispreston99 snrdgc

file-dialog's Issues

Does not trigger always on Chrome

I am using Chrome Version 72.0.3626.109 (Official Build) (64-bit)
In my html, I have HTML dropdown and I want to trigger the fileDialog open event on selection change.

This works 8/10 times but not always. Firefox works everytime.

Is there any permanent solution for that?

main = file-dialog-min.js ?

Hi,
thanks for making this module available. Would it make sense to link main to the minified file? I'm using this with Meteor, which supports Babel and import statements, but which expects libraries to be already transformed into ES5, so trying to build an app which includes this module fails at the uglify stage (because the code doesn't get run through Babel, even though my own code is ES6, and does get run through babel).

I guess eventually there might be a way to specify an ES5 and an ES6 main, since I understand that people using rollup etc want access to the unminified code...

Open Directory

It would be nice to have support opening directory
<input type="file" webkitdirectory directory multiple />

Not working in IE and Edge

Change event fired immediately after input.dispatchEvent(evt) in IE, so to fix it we need to move input.dispatchEvent(evt) after attaching "change" listener in Promise.

IE support

Hi! The README says "Support for all major browsers", could you please be more specific in the description at least with the minimum supported versions? I guess IE11 is supported, and maybe IE10, or am I wrong here? Thank you!

handle cancel on file input

I think that if no files selected the promise should either fail or resolve with an empty list of files.

Stopped working in chrome

How do you know the directory?

The object doesn't appear to include the directory. If I want to load the file how do I know where it is?

Bug: infinitely growing input

everytime I trigger fileDialog, it create an input and never clean them up.

Made some modifications

Hi,

Thanks for this.

I made some changes for my TypeScript based application as the provided TS definitions was not good for me.

The only minor issue I have is the promise will never resolve or reject if user clicks cancel when the file input dialog is opened - potential memory leak if done repeatedly.

Sharing here FWIW:

// modified based on alnorris/file-dialog
// https://github.com/alnorris/file-dialog/blob/master/file-dialog.d.ts
// - removed support for callback
// - improved TypeScript type definitions
// - directly click() on input
// - do not add input to DOM (seems to work in Chrome - no plans to support MSIE)
export const fileDialog = (options?: { multiple?: boolean, accept?: string }) => {
  const input = document.createElement('input')

  // Set config
  if (options) {
    if (options.multiple) {
      input.setAttribute('multiple', '')
    }
    if (options.accept !== undefined) {
      input.setAttribute('accept', options.accept)
    }
  }

  input.setAttribute('type', 'file')

  // Return promise
  return new Promise<FileList | null>(resolve => {
    input.addEventListener('change', () => resolve(input.files))
    input.click()
  })
}