103 lines
3.0 KiB
JavaScript
103 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import {useState, useEffect} from 'react'
|
|
import PropTypes from 'prop-types';
|
|
import { styled } from '@mui/material/styles';
|
|
import LinearProgress from '@mui/material/LinearProgress';
|
|
import { Box, Typography, Button } from '@mui/material';
|
|
|
|
import axios from 'axios';
|
|
|
|
const baseURL = "http://localhost:8000/api"
|
|
|
|
const Input = styled('input')({
|
|
display: 'none',
|
|
});
|
|
|
|
function LinearProgressWithLabel(props) {
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<Box sx={{ width: '100%', mr: 1 }}>
|
|
<LinearProgress variant="determinate" {...props} />
|
|
</Box>
|
|
<Box sx={{ minWidth: 35 }}>
|
|
<Typography variant="body2" color="text.secondary">{`${Math.round(
|
|
props.value,
|
|
)}%`}</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
LinearProgressWithLabel.propTypes = {
|
|
/**
|
|
* The value of the progress indicator for the determinate and buffer variants.
|
|
* Value between 0 and 100.
|
|
*/
|
|
value: PropTypes.number.isRequired,
|
|
};
|
|
|
|
const UploadFiles = (props) => {
|
|
const { apiURL, fileName, buttonText, applyBinarize, debug } = props;
|
|
|
|
const [progress, setProgress] = useState(0);
|
|
const [uploadFile, setUploadFile] = useState(0);
|
|
|
|
const handleUploadSelection = (e) => {
|
|
console.log(e.target.files[0])
|
|
setUploadFile(e.target.files[0]);
|
|
};
|
|
|
|
const handleUpload = (event) => {
|
|
event.preventDefault()
|
|
const formData = new FormData();
|
|
console.log(uploadFile)
|
|
formData.append("fileTitle", fileName);
|
|
formData.append("applyBinarize", applyBinarize);
|
|
formData.append("debug", debug);
|
|
formData.append("uploadedFile", uploadFile);
|
|
axios.post(baseURL+apiURL, formData, {
|
|
headers: {
|
|
'content-type': 'multipart/form-data'
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
console.log(response);
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
return(
|
|
<div style={{ height: 100, width: '100%' }}>
|
|
<Box sx={{ width: '100%' }}>
|
|
<LinearProgressWithLabel value={progress} />
|
|
</Box>
|
|
|
|
<label htmlFor="contained-button-file">
|
|
<Input
|
|
accept="image/*"
|
|
id="contained-button-file"
|
|
multiple type="file"
|
|
onChange={handleUploadSelection}
|
|
/>
|
|
<Button variant="contained" component="span">
|
|
Bild auswählen
|
|
</Button>
|
|
<div className="file-name">
|
|
{uploadFile && uploadFile.length > 0 ? uploadFile[0].name : null}
|
|
</div>
|
|
<Button
|
|
variant="contained"
|
|
component="span"
|
|
onClick={handleUpload}
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UploadFiles
|