Sha256: ddc4eda03e4ee1c46e11c0791563a91f411a57bc9143ccd5649332b29a2cdd3d
Contents?: true
Size: 1.58 KB
Versions: 38
Compression:
Stored size: 1.58 KB
Contents
/* eslint-disable react/no-multi-comp */
import React, { useState } from 'react'
import {
Body,
FileUpload,
List,
ListItem,
} from 'playbook-ui'
const AcceptedFilesList = ({ files }) => (
<List>
{files.map((file) => (
<ListItem key={file.name}>{file.name}</ListItem>
))}
</List>
)
const RejectedFilesList = ({ files }) => (
<List>
{files.map((file) => (
<ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
))}
</List>
)
const FileUploadMaxSize = (props) => {
const [filesToUpload, setFilesToUpload] = useState([])
const [filesRejected, setFilesRejected] = useState([])
const [error, setError] = useState()
const handleOnFilesAccepted = (files) => {
if (files.length) setError()
setFilesToUpload([...filesToUpload, ...files])
}
const handleOnFilesRejected = (error, files) => {
setError(error)
setFilesRejected([...filesRejected, ...files])
}
return (
<div>
<AcceptedFilesList
files={filesToUpload}
{...props}
/>
<RejectedFilesList
files={filesRejected}
{...props}
/>
<FileUpload
acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
maxSize={1000000}
onFilesAccepted={handleOnFilesAccepted}
onFilesRejected={handleOnFilesRejected}
{...props}
/>
{ error && (
<Body
color="error"
marginY="md"
>
{error}
</Body>
)}
</div>
)
}
export default FileUploadMaxSize
Version data entries
38 entries across 38 versions & 2 rubygems