📂 use-file-upload

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

 

Install

``bash
npm install --save use-file-upload


or

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

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

return (


onClick={() => {
// Single File Upload
selectFile()
}}
>
Click to Upload

{file ? (

Name: {file.name}
Size: {file.size}

) : (
No file selected
)}

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 }.

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

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

return (


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

{file ? (

Name: {file.name}
Size: {file.size}

) : (
No file selected
)}

export default App
`

Multiple Files Upload

Select multiple files at a go.

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

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

return (


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

{files ? (
files.map((file) => (

Name: {file.name}
Size: {file.size}

))
) : (
No file selected
)}

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

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

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

return (


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

{file ? (

Name: {file.name}
Size: {file.size}

) : (
No file selected
)}

export default App
``

License

MIT © Marvinified