alnorris / file-dialog Goto Github PK
View Code? Open in Web Editor NEWTrigger the upload file dialog directly from your code easily.
Trigger the upload file dialog directly from your code easily.
I think that if no files selected the promise should either fail or resolve with an empty list of files.
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...
It would be nice to have support opening directory
<input type="file" webkitdirectory directory multiple />
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.
Stopped working in chrome
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()
})
}
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?
The object doesn't appear to include the directory. If I want to load the file how do I know where it is?
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.