useFileSelect

Programmatically open the native file selection UI.

Open the native file selector. Includes options to select multiple files, the accepted file types, and the capture source.

import { useFileSelect } from 'react-gui/use-file-select';

const openFileSelect = useFileSelect(fileSelectProps);

API #

Returns #

useFileSelect returns a function to programmatically open the file select.

openFileSelect ?() => void

Call this function to open the native file selection interface.

FileSelectProps #

acceptMultiple ?boolean

Set whether multiple files can be selected.

acceptTypes ?Array<string>

Set the unique file type specifiers accepted.

onFilesChange ?(Array<File> => void)

This function is called with an array of File objects once the user has selected files to upload.

source ?("environment" | "user")

Optionally specify that a new file should be captured using the outward-facing ("environment") or user-facing ("user") camera and/or microphone.


Examples #

import useFileSelect from 'react-gui/use-file-select';

function Component() {
const openFileSelect = useFileSelect({
acceptMultiple: true,
acceptTypes: ['image/jpeg','*.jpg'],
onFilesChange: (files) => {
files.forEach((file: File) => {
// do something with file
}
},
source: 'environment'
});
// ...
}
Updated
Edit
React GUICopyright © Facebook Inc.