📂 use-file-upload

React hooks library to add highly customisable file uploads into your react application.

Install

yarn add use-file-upload
# or
npm install --save use-file-upload

Compatibility

• Node.js >=18
• React >=16.8.0 <20

Fork Demo on Codesandbox

Usage

Basic File Upload

import React from 'react'
import { useFileUpload } from 'use-file-upload'

const App = () => {
  const [file, selectFile, clearFile] = useFileUpload()

  return (
    <div>
      <button
        onClick={() => {
          // Single File Upload
          selectFile()
        }}
      >
        Click to Upload
      </button>
      <button onClick={clearFile}>Clear</button>

      {file ? (
        <div>
          <img src={file.source} alt='preview' />
          <span> Name: {file.name} </span>
          <span> Size: {file.size} </span>
        </div>
      ) : (
        <span>No file selected</span>
      )}
    </div>
  )
}

export default App

Detect cancel and clear selected files

You can detect when users close the picker without selecting a file and clear state manually.

import React from 'react'
import { useFileUpload } from 'use-file-upload'

const App = () => {
  const [file, selectFile, clearFile] = useFileUpload()

  return (
    <button
      onClick={() =>
        selectFile(
          { accept: 'image/*', onCancel: () => console.log('Selection cancelled') },
          (selectedFile) => console.log(selectedFile)
        )
      }
    >
      Pick file
    </button>
  )
}

Working with selected file

If you want to perform other tasks with the selected file you can pass the callback which returns {source, name, size, file }.

import React from 'react'
import { useFileUpload } from 'use-file-upload'

const App = () => {
  const [file, selectFile] = useFileUpload()

  return (
    <div>
      <button
        onClick={() => {
          // Single File Upload
          selectFile({}, ({ source, name, size, file }) => {
            // file - is the raw File Object
            console.log({ source, name, size, file })
            // Todo: Upload to cloud.
          })
        }}
      >
        Click to Upload
      </button>

      {file ? (
        <div>
          <img src={file.source} alt='preview' />
          <span> Name: {file.name} </span>
          <span> Size: {file.size} </span>
        </div>
      ) : (
        <span>No file selected</span>
      )}
    </div>
  )
}

export default App

Multiple Files Upload

Select multiple files at a go.

import React from 'react'
import { useFileUpload } from 'use-file-upload'

const App = () => {
  const [files, selectFiles] = useFileUpload()

  return (
    <div>
      <button
        onClick={() => {
          // Single File Upload
          selectFiles({ multiple: true }, (files) => {
            // Note callback return an array
              files.map(({ source, name, size, file }) =>{
                console.log({ source, name, size, file })
              })
            // Todo: Upload to cloud.
          }))
        }}
      >
        Click to Upload
      </button>

      {files ? (
        files.map((file) => (
          <div>
            <img src={file.source} alt='preview' />
            <span> Name: {file.name} </span>
            <span> Size: {file.size} </span>
          </div>
        ))
      ) : (
        <span>No file selected</span>
      )}
    </div>
  )
}

export default App

Note: callback and files return an array for multiple files select.

Setting Allowed File type

Restrict what types of files can be selected using the accept option.It Support all file extensions or MIME types

import React from 'react'
import { useFileUpload } from 'use-file-upload'

const App = () => {
  const [file, selectFile] = useFileUpload()

  return (
    <div>
      <button
        onClick={() => {
          // Single File Upload accepts only images
          selectFile({ accept: 'image/*' }, ({ source, name, size, file }) => {
            // file - is the raw File Object
            console.log({ source, name, size, file })
            // Todo: Upload to cloud.
          })
        }}
      >
        Click to Upload
      </button>

      {file ? (
        <div>
          <img src={file.source} alt='preview' />
          <span> Name: {file.name} </span>
          <span> Size: {file.size} </span>
        </div>
      ) : (
        <span>No file selected</span>
      )}
    </div>
  )
}

export default App

License

MIT © Marvinified