91 lines
1.7 KiB
TypeScript
91 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import {upload as ApiUpload} from "../services/PhpApi";
|
|
import PreviewUpload from "./PreviewUpload";
|
|
import './InputForm.css';
|
|
import { notificationError, notificationSuccess } from "../services/Notifications";
|
|
|
|
const FileUpload: React.FC = () =>
|
|
{
|
|
const [currentFile, setCurrentFile] = useState<File>();
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
|
|
const selectFile = (pl: File) =>
|
|
{
|
|
setCurrentFile(pl);
|
|
setProgress(0);
|
|
};
|
|
|
|
const upload = () =>
|
|
{
|
|
setProgress(0);
|
|
if (!currentFile) return;
|
|
|
|
ApiUpload(currentFile, '', (event: any) =>
|
|
{
|
|
setProgress(Math.round((100 * event.loaded) / event.total));
|
|
})
|
|
.then((response) =>
|
|
{
|
|
notificationSuccess(response.data.message);
|
|
return;
|
|
})
|
|
.catch((err) =>
|
|
{
|
|
setProgress(0);
|
|
|
|
if (err.response && err.response.data && err.response.data.message)
|
|
{
|
|
notificationError(err.response.data.message);
|
|
}
|
|
else
|
|
{
|
|
notificationError("Could not upload the File!");
|
|
}
|
|
|
|
setCurrentFile(undefined);
|
|
});
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div className="row InputForm">
|
|
<div className="col-8">
|
|
<PreviewUpload chgFile={selectFile} />
|
|
</div>
|
|
<div>
|
|
<button
|
|
//className="btn btn-success btn-sm"
|
|
disabled={!currentFile}
|
|
onClick={upload}
|
|
>
|
|
Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{currentFile && (
|
|
<div className="progress my-3">
|
|
<div
|
|
className="progress-bar progress-bar-info"
|
|
role="progressbar"
|
|
aria-valuenow={progress}
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
style={{ width: progress + "%" }}
|
|
>
|
|
{progress}%
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Link to={"/profil"}>Zurück zum Profil</Link>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default FileUpload; |