94 lines
2.1 KiB
TypeScript
94 lines
2.1 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Backdrop, Box, Button, Fade, Link, Modal } from "@mui/material"
|
|
import { useCookies } from "react-cookie"
|
|
import { toast } from 'react-toastify'
|
|
import api from '../../../api_utils'
|
|
import style from './style'
|
|
|
|
function UploadModal({ open, setOpen, path, refresh }: Props) {
|
|
const [file, setFile]: [FileList | null | undefined, React.Dispatch<React.SetStateAction<FileList | null | undefined>>] = useState()
|
|
|
|
const [cookies] = useCookies(["token"])
|
|
|
|
const onFileChange: React.ChangeEventHandler<HTMLInputElement> = event => {
|
|
setFile(event.target.files)
|
|
console.log(file)
|
|
}
|
|
|
|
const handleUpload = () => {
|
|
const formData = new FormData()
|
|
|
|
if (file == null || typeof file == "undefined") {
|
|
return
|
|
}
|
|
|
|
formData.append(
|
|
"file",
|
|
file[0]
|
|
)
|
|
|
|
const filePath = `${path}/${file[0].name}`
|
|
|
|
const request = api.upload(filePath, formData, cookies.token)
|
|
|
|
toast.promise(
|
|
request,
|
|
{
|
|
pending: 'Uploading file...',
|
|
success: {
|
|
delay: 500,
|
|
render() {
|
|
refresh()
|
|
setOpen(false)
|
|
|
|
return "File uploaded!"
|
|
}
|
|
},
|
|
error: {
|
|
delay: 500,
|
|
render(err) {
|
|
if (err.data.response?.data?.error_message) {
|
|
return err.data.response.data.error_message.toString()
|
|
} else {
|
|
return err.data.toString()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
closeAfterTransition
|
|
BackdropComponent={Backdrop}
|
|
BackdropProps={{
|
|
timeout: 500,
|
|
}}
|
|
>
|
|
<Fade in={open}>
|
|
<Box sx={style}>
|
|
<input type="file" onChange={onFileChange} />
|
|
|
|
<Link>
|
|
<Button variant="outlined" onClick={handleUpload}>
|
|
Upload
|
|
</Button>
|
|
</Link>
|
|
</Box>
|
|
</Fade>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export type Props = {
|
|
open: boolean,
|
|
setOpen: React.Dispatch<React.SetStateAction<boolean>>,
|
|
path: string,
|
|
refresh: () => void,
|
|
}
|
|
|
|
export default UploadModal
|