Use File Reader

This is a React hook to use the FileReader api.

Install

npm install react-use-file-reader
yarn add react-use-file-reader

Usage

import React from 'react'
import { useFileReader } from 'react-use-file-reader'

export const MyComponent = prop => {
  const [{ result, error, loading }, setFile] = useFileReader({
    method: 'readAsDataURL',
  })

  const onInputFile = e => {
    setFile(e.target.files[0])
  }

  return (
    <>
      {loading ? <p>Reading file</p> : null}
      {error ? <p>{error.message}</p> : null}
      {result ? <img src={result} /> : null}
      <input type="file" accept=".jpg,.png,.svg" onInput={onInputFile} />
    </>
  )
}

Options

method [String] - This is the read method you would use like: readAsText readAsDataURL. readAsText is the default. onload [Function] - This fire onload event of the reader. This parameter is the result of the file reader.