file-select-dialog

file-select-dialog

Directly call file select dialog to JavaScript. Get Back Promise File or FileList object. No more hacky hiding of <input type="file"> elements.

:sparkles: Feature

• Supports ES6 Modules
• Pure Typescript
• Promise
• No dependencies, Optimization, Super slim size
• Modern browser support only
• Supports selecting multiple files and the file type accepts

:truck: Install

yarn add file-select-dialog
or
npm i file-select-dialog

import like this.

import { fileDialog } from 'file-select-dialog'

:page_facing_up: Docs

Reference is here.

:pencil2: Argument

Parameters Object

key	type	default
accept	(string | stirng[] )?	'*'
multiple	boolean?	false
strict	boolean?	false

:mag: Examples

Demo

By default can only select a single file and get a FileList object.

const onClick = async () => {
  // open file select dialog and waiting user selection then return FileList object.
  const fileList = await fileDialog()
}

If the multiple parameter is true, can select multiple files and get a FileList object.

const onClick = async () => {
  const fileList = await fileDialog({ multiple: true })
}

The accept parameter limit the selecable file types.

const onClick = async () => {
  const fileList = await fileDialog({ accept: '.png' })

  // multiple acceptable types
  const fileList = await fileDialog({ accept: ['.jpg', '.pdf'] })
}

:zap: Advanced

If the parameter of multiple is false and strict is true, can get File object directly. Your editor suggest File object types.

const onClick = async () => {
  const file = await fileDialog({ strict: true })
}

:bulb: LICENSE

MIT



Changelog

1.5.1 (2021-02-10)

Bug Fixes

• docs: change base path (d20183b)
• docs: change path (dffcb23)
• docs: fix typo (df19064)

Features

• file-dialog: add strict parameter and change default return types (b9754e2)