12345678910111213141516171819202122232425262728293031323334353637 |
- import { useCallback } from 'react';
- import { useDropzone } from 'react-dropzone';
- import { connect } from 'react-redux';
- import { actionUploadFile } from '../actions';
- export const MyDropzone = ({ maxFiles, onUpload, onSet }) => {
- const onDrop = useCallback(acceptedFiles => {
- acceptedFiles.forEach(async (file) => {
- let result = await onUpload(file)
- onSet(result)
- })
- }, [onUpload])
- const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ onDrop, maxFiles: maxFiles })
- const files = acceptedFiles.map(file => (
- <li key={file.path}>
- {file.path} - {file.size} bytes
- </li>
- ))
- return (
- <div>
- <div {...getRootProps()}>
- <input {...getInputProps()} />
- <p>Drag 'n' drop some files here, or click to select files</p>
- {maxFiles && <span>Max files: {maxFiles}</span>}
- </div>
- <aside>
- <h4>Files</h4>
- <ul>{files}</ul>
- </aside>
- </div>
- )
- }
- export const ConnectDropzone = connect(null, { onUpload: actionUploadFile })(MyDropzone)
|