Sha256: ae01e575ed34b60516c1231e091e898c39c1dd3b2f2a053e377c0c177e80b35b
Contents?: true
Size: 1.59 KB
Versions: 4
Compression:
Stored size: 1.59 KB
Contents
/* @flow */
/* 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.name}><Body color="error">{`${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
4 entries across 4 versions & 2 rubygems