2022-02-25 16:57:08 +05:00
|
|
|
import { memo, useCallback, useState } from 'react'
|
2021-08-17 16:46:46 +05:00
|
|
|
import { Upload, Button } from 'antd'
|
|
|
|
import { UploadOutlined } from '@ant-design/icons'
|
2022-01-24 21:16:50 +05:00
|
|
|
|
2021-08-17 10:46:28 +05:00
|
|
|
import { upload } from './factory'
|
2021-10-11 13:41:54 +05:00
|
|
|
import { ErrorFetch } from './ErrorFetch'
|
2021-08-17 10:46:28 +05:00
|
|
|
|
2022-02-22 15:28:55 +05:00
|
|
|
export const UploadForm = memo(({ url, disabled, accept, style, formData, onUploadStart, onUploadSuccess, onUploadComplete, onUploadError }) => {
|
2021-08-17 16:46:46 +05:00
|
|
|
const [fileList, setfileList] = useState([])
|
2021-08-17 10:46:28 +05:00
|
|
|
|
2022-02-25 16:57:08 +05:00
|
|
|
const handleFileSend = useCallback(async () => {
|
2022-01-24 21:16:50 +05:00
|
|
|
onUploadStart?.()
|
2021-08-17 10:46:28 +05:00
|
|
|
try {
|
2021-10-11 13:41:54 +05:00
|
|
|
const formDataLocal = new FormData()
|
2022-01-24 21:16:50 +05:00
|
|
|
fileList.forEach((val) => formDataLocal.append('files', val.originFileObj))
|
2021-10-11 13:41:54 +05:00
|
|
|
|
|
|
|
if(formData)
|
2022-01-24 21:16:50 +05:00
|
|
|
for(const propName in formData)
|
2021-10-11 13:41:54 +05:00
|
|
|
formDataLocal.append(propName, formData[propName])
|
2022-01-24 21:16:50 +05:00
|
|
|
|
2021-10-11 13:41:54 +05:00
|
|
|
const response = await upload(url, formDataLocal)
|
2022-01-24 21:16:50 +05:00
|
|
|
if (!response.ok) {
|
|
|
|
const errorText = await response.text()
|
2021-10-11 13:41:54 +05:00
|
|
|
const error = new ErrorFetch(response.status, errorText)
|
|
|
|
throw error
|
2022-01-24 21:16:50 +05:00
|
|
|
} else {
|
|
|
|
onUploadSuccess?.()
|
2021-10-11 13:41:54 +05:00
|
|
|
}
|
2021-08-17 10:46:28 +05:00
|
|
|
} catch(error) {
|
2022-02-22 15:28:55 +05:00
|
|
|
if(process.env.NODE_ENV === 'development')
|
|
|
|
console.error(error)
|
2022-01-24 21:16:50 +05:00
|
|
|
onUploadError?.(error)
|
2021-08-17 10:46:28 +05:00
|
|
|
} finally {
|
2021-08-17 16:46:46 +05:00
|
|
|
setfileList([])
|
2022-01-24 21:16:50 +05:00
|
|
|
onUploadComplete?.()
|
2021-08-17 10:46:28 +05:00
|
|
|
}
|
2022-02-25 16:57:08 +05:00
|
|
|
}, [fileList, formData, onUploadComplete, onUploadError, onUploadStart, onUploadSuccess, url])
|
2021-08-17 10:46:28 +05:00
|
|
|
|
2021-08-17 16:46:46 +05:00
|
|
|
const isSendButtonEnabled = fileList.length > 0
|
2021-08-17 10:46:28 +05:00
|
|
|
return(
|
2022-01-24 21:16:50 +05:00
|
|
|
<div style={{ display: 'flex', ...style }}>
|
|
|
|
<Upload
|
|
|
|
name={'file'}
|
2021-09-01 10:32:47 +05:00
|
|
|
accept={accept}
|
2022-02-22 15:28:55 +05:00
|
|
|
disabled={disabled}
|
2022-01-24 21:16:50 +05:00
|
|
|
fileList={fileList}
|
|
|
|
onChange={(props) => setfileList(props.fileList)}
|
|
|
|
>
|
2022-02-22 15:28:55 +05:00
|
|
|
<Button disabled={disabled} icon={<UploadOutlined/>}>Загрузить файл</Button>
|
2021-08-17 16:46:46 +05:00
|
|
|
</Upload>
|
2022-01-24 21:16:50 +05:00
|
|
|
<Button
|
|
|
|
type={'primary'}
|
|
|
|
onClick={handleFileSend}
|
2021-08-17 16:46:46 +05:00
|
|
|
disabled={!isSendButtonEnabled}
|
2022-01-24 21:16:50 +05:00
|
|
|
style={{ marginLeft: '10px', display: isSendButtonEnabled ? '' : 'none' }}
|
|
|
|
>
|
2021-08-17 16:46:46 +05:00
|
|
|
Отправить
|
|
|
|
</Button>
|
|
|
|
</div>
|
2021-08-17 10:46:28 +05:00
|
|
|
)
|
2022-01-24 21:16:50 +05:00
|
|
|
})
|
2022-02-24 15:42:26 +05:00
|
|
|
|
|
|
|
export default UploadForm
|