Simple React Hook to Open Browser File Selector

Welcome to use-file-picker 👋

Simple react hook to open browser file selector.

🏠 Homepage

Install

npm i use-file-picker

Example

https://codesandbox.io/s/pedantic-joliot-8nkn7?file=/src/App.js

Usage

import { useFilePicker } from 'use-file-picker';

function App() {
  const [filesContent, errors, openFileSelector, loading] = useFilePicker({
    multiple: true,
    // accept: '.ics,.pdf',
    accept: ['.json', '.pdf'],
  });

  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)}</pre>
    </div>
  );
}

Author

👤 Milosz Jankiewicz

• Twitter: @twitter.com/JankiewiczMi/
• Github: @Jaaneek
• LinkedIn: @https://www.linkedin.com/in/jaaneek

👤 Kamil Planer

• Github: @MrKampla
• LinkedIn: @https://www.linkedin.com/in/kamil-planer/

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Download Details:

Author: Jaaneek

Demo: https://codesandbox.io/s/pedantic-joliot-8nkn7?file=/src/App.js

Source Code: https://github.com/Jaaneek/useFilePicker

#react #reactjs #javascript