forked from ddrilling/asb_cloud_front
46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import { Upload, Button } from 'antd'
|
|
import { UploadOutlined } from '@ant-design/icons'
|
|
import { useState } from 'react'
|
|
import { upload } from './factory'
|
|
|
|
export default function UploadForm({url, accept, onUploadStart, onUploadComplete, onUploadError}) {
|
|
const [fileList, setfileList] = useState([])
|
|
|
|
const handleFileSend = async (values) => {
|
|
if(onUploadStart)
|
|
onUploadStart()
|
|
try {
|
|
const formData = new FormData()
|
|
fileList.forEach((val) => {
|
|
formData.append("files", val.originFileObj);
|
|
});
|
|
await upload(url, formData)
|
|
} catch(error) {
|
|
if(onUploadError)
|
|
onUploadError(error)
|
|
} finally {
|
|
setfileList([])
|
|
if(onUploadComplete)
|
|
onUploadComplete()
|
|
}
|
|
}
|
|
|
|
const isSendButtonEnabled = fileList.length > 0
|
|
return(
|
|
<div style={{display: 'flex'}}>
|
|
<Upload
|
|
name ="file"
|
|
fileList={fileList}
|
|
accept={accept}
|
|
onChange={(props) => setfileList(props.fileList)}>
|
|
<Button icon={<UploadOutlined/>}>Загрузить файл</Button>
|
|
</Upload>
|
|
<Button type="primary"
|
|
disabled={!isSendButtonEnabled}
|
|
style={{marginLeft: '10px', display:isSendButtonEnabled?'':'none'}}
|
|
onClick={handleFileSend}>
|
|
Отправить
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|