import React from 'react'; import S3 from 'react-aws-s3'; import { Form, Upload, } from 'antd'; const normFile = (e) => { console.log('Upload event:', e); if (Array.isArray(e)) { return e; } return e && e.fileList; }; const props = { onStart(file) { console.log('onStart', file, file.name); }, onSuccess(res, file) { console.log('onSuccess', res, file.name,file); }, onError(err) { console.log('onError', err); }, onProgress({ percent }, file) { console.log('onProgress', `${percent}%`, file.name); }, async customRequest({ action, data, file, filename, headers, onError, onProgress, onSuccess, withCredentials, }) { const formData = new FormData(); if (data) { Object.keys(data).forEach(key => { formData.append(key, data[key]); }); } formData.append(filename, file); const configSettings = { bucketName: 'xxx', region: 'ap-south-1', accessKeyId: 'xxxxxxxxxx', secretAccessKey: 'xxxxxxxxxxxx', }; var S3Client = new S3(configSettings); console.log('df', S3Client); await S3Client.uploadFile(file.originFileObj, filename) .then((data) => { console.log('data', data); onSuccess(data, fileName); }) .catch(onError); return { abort() { console.log('upload progress is aborted.'); }, }; }, }; const FileUpload = () => { return ( <> <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle {...props} > <Upload.Dragger name="files" action="/upload.do" {...props}> <p className="ant-upload-drag-icon"></p> <p className="ant-upload-text"> Click or drag file to this area to upload </p> <p className="ant-upload-hint"> Support for a single or bulk upload. </p> </Upload.Dragger> </Form.Item> </> ); }; export default FileUpload;