React Hook For File Selector – useFilePicker

Description:

A React hook t0 open browser file selector.

How to use it:

1. Install and import the useFilePicker.

# NPM
$ npm i use-file-picker

import { useFilePicker } from 'use-file-picker';
import React from "react";

2. Create a basic file picker on the app and determine which file types are allowed to select.

export default function App() {
  const [filesContent, errors, openFileSelector, loading] = useFilePicker({
    accept: [".jpg", ".png"]
  });
  if (errors.length > 0) return <p>Error!</p>;
  if (loading) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <button onClick={() => openFileSelector()}>Reopen file selector</button>
      <pre>{JSON.stringify(filesContent, null, 2)}</pre>
    </div>
  );
}

3. Determine whether to allow multiple files.

const [filesContent, errors, openFileSelector, loading] = useFilePicker({
  multiple: true,
});

Preview: