inputUploadFile.js 829 B

12345678910111213141516171819202122232425262728293031
  1. import React, {useCallback} from 'react';
  2. import {useDropzone} from 'react-dropzone';
  3. import { Upload, message, Button } from 'antd';
  4. import { UploadOutlined } from '@ant-design/icons';
  5. import { store} from '../store';
  6. import { actionUploadFile } from '../action';
  7. const InputUpLoadFile = () => {
  8. const onDrop = useCallback(acceptedFiles => {
  9. console.log('acceptedFiles', acceptedFiles);
  10. store.dispatch(actionUploadFile(acceptedFiles ))
  11. }, [])
  12. const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
  13. return (
  14. <div {...getRootProps()}>
  15. <input {...getInputProps()} />
  16. {
  17. isDragActive ?
  18. <p>Drop the files here ...</p> :
  19. <Button icon={<UploadOutlined />}> Выбрать файл</Button>
  20. }
  21. </div>
  22. )
  23. }
  24. export default InputUpLoadFile;