This kit provides a drag and drop interface for file uploads. Currently, the kit leverages react-dropzone.
accept: [String]
Use this prop to set the list of valid file types
onFilesAccepted: Function
The callback function, providing the list of dropped files
/* @flow */ import React, { useState } from 'react' import { FileUpload, List, ListItem, } from '../..' const AcceptedFilesList = ({ files }: FileList) => ( <List> {files.map((file) => ( <ListItem key={file.name}>{file.name}</ListItem> ))} </List> ) const FileUploadDefault = (props) => { const [filesToUpload, setFilesToUpload] = useState([]) const handleOnFilesAccepted = (files) => { setFilesToUpload([...filesToUpload, ...files]) } return ( <div> <AcceptedFilesList files={filesToUpload} {...props} /> <FileUpload onFilesAccepted={handleOnFilesAccepted} {...props} /> </div> ) } export default FileUploadDefault
/* @flow */ import React, { useState } from 'react' import { FileUpload, List, ListItem, } from '../..' const AcceptedFilesList = ({ files }: FileList) => ( <List> {files.map((file) => ( <ListItem key={file.name}>{file.name}</ListItem> ))} </List> ) const FileUploadAccept = (props) => { const [filesToUpload, setFilesToUpload] = useState([]) const handleOnFilesAccepted = (files) => { setFilesToUpload([...filesToUpload, ...files]) } return ( <div> <AcceptedFilesList files={filesToUpload} {...props} /> <FileUpload accept={['image/svg+xml']} onFilesAccepted={handleOnFilesAccepted} {...props} /> </div> ) } export default FileUploadAccept