1234567891011121314151617181920212223242526272829303132333435 |
- 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(async acceptedFiles => {
- let files = []
- await Promise.all(acceptedFiles.map(async (file) => {
- let result = await onUpload(file)
- files.push(result)
- console.log(files)
- }))
- onSet(files)
- }, [onUpload, onSet])
- 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()} />
- <span>Drag 'n' drop here, or click to select</span>
- </div>
- </div>
- )
- }
- export const ConnectDropzone = connect(null, { onUpload: actionUploadFile })(MyDropzone)
|