104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
import React, { useState } from 'react'
|
|
import '../../App.css'
|
|
import Footer from '../ComponentUtils/Footer'
|
|
|
|
import ImageUploadCard from '../ComponentUtils/ImageUploadCard'
|
|
|
|
import Navbar from '../ComponentUtils/Headers/Navbar'
|
|
|
|
import { useHistory } from "react-router-dom";
|
|
import { Button, Container, Box } from '@material-ui/core';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import Swal from 'sweetalert2/dist/sweetalert2.js'
|
|
import 'sweetalert2/src/sweetalert2.scss'
|
|
|
|
import { sendRequest } from '../../Utils/sendRequest'
|
|
|
|
// Background.css is now globally imported in src/index.js
|
|
|
|
const useStyles = makeStyles({
|
|
multiUploadButton: {
|
|
borderRadius: '25px',
|
|
padding: '12px 30px',
|
|
fontSize: '16px',
|
|
fontWeight: '500',
|
|
textTransform: 'none',
|
|
background: 'linear-gradient(45deg, #2196F3 30%, #1976D2 90%)',
|
|
color: 'white',
|
|
marginTop: '20px',
|
|
'&:hover': {
|
|
background: 'linear-gradient(45deg, #1976D2 30%, #2196F3 90%)',
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: '0 4px 12px rgba(33, 150, 243, 0.3)'
|
|
}
|
|
},
|
|
buttonContainer: {
|
|
textAlign: 'center',
|
|
marginTop: '20px',
|
|
marginBottom: '20px'
|
|
}
|
|
});
|
|
|
|
function UploadPage() {
|
|
const classes = useStyles();
|
|
|
|
|
|
// History for pushing to a new link after uploading image
|
|
const history = useHistory();
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
|
|
const handleLoading = () => {
|
|
setLoading(true)
|
|
}
|
|
|
|
const handleResponse = (value) => {
|
|
// Router push to uploadd page
|
|
setTimeout(() => {
|
|
setLoading(false)
|
|
history.push(value.data.filePath)
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: "Your image was uploaded!",
|
|
showConfirmButton: false,
|
|
timer: 1500
|
|
})
|
|
}, 1400)
|
|
}
|
|
|
|
const handlePaste = (event) => {
|
|
const fileUploaded = event.clipboardData.files[0]
|
|
sendRequest(fileUploaded, handleLoading, handleResponse)
|
|
}
|
|
|
|
const handleMultiUpload = () => {
|
|
history.push('/multi-upload')
|
|
}
|
|
|
|
return (
|
|
<div className="allContainer" onPaste={handlePaste}>
|
|
<Navbar />
|
|
<ImageUploadCard handleLoading={handleLoading} handleResponse={handleResponse} loading={loading}/>
|
|
|
|
<Container maxWidth="sm">
|
|
<div className={classes.buttonContainer}>
|
|
<Button
|
|
className={classes.multiUploadButton}
|
|
onClick={handleMultiUpload}
|
|
size="large"
|
|
>
|
|
📸 Mehrere Bilder hochladen
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
|
|
<div className="footerContainer">
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UploadPage
|