Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



React Hook For File Selector – useFilePicker

A React hook t0 open browser file selector.

How to use it:

1. Install and import the useFilePicker.

$ 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 (
      <button onClick={() => openFileSelector()}>Reopen file selector</button>
      <pre>{JSON.stringify(filesContent, null, 2)}</pre>

3. Determine whether to allow multiple files.

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


Download Details:

Author: Jaaneek

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Jaaneek/useFilePicker

License: MIT

Credit: Source link

Previous Next
Test Caption
Test Description goes like this