marvinified/use-file-upload

react hooks library to build highly customisable file uploads into your react app.

📂 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

use-file-upload's Issues

Error in file declare module in typescript

That error, happen when I started project react using typescript

Could not resolve dependency: react@"^16.0.0"

I'm trying to install this package for my react app but it blocks me with this error:
Could not resolve dependency: peer react@"^16.0.0" from [email protected]

my react version is ^17.0.2 and this package does not seem to be compatible with this version.

on cancel select file event or set files to null

there is no way to know if the user did not decide to select a file, there is also no way to set files to null, and have the file cleared

component does not re-render when uploading videos

hi, really nice file upload component, but the component does not re-render when uploading videos, when the first video is selected, it shows up as normal, but when replaced with a second video, the first one still persists

How to delete selected files

Hi,
I don't find any way to remove the selected files. Can you provide some code to remove files?

Many thanks!