📂 use-file-upload

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

Install

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

Fork Demo on Codesandbox

Usage

Basic File Upload

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

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

  return (
    <div>
      <button
        onClick={() => {
          // Single File Upload
          selectFile()
        }}
      >
        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

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