React hooks library to add highly customisable file uploads into your react application.
npm install --save use-file-upload # or yarn add use-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 AppIf 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 AppSelect 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 AppNote:
callbackandfilesreturn an array for multiple files select.
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 AppMIT © Marvinified