110 lines
3.7 KiB
JavaScript
110 lines
3.7 KiB
JavaScript
import * as React from 'react';
|
|
import {useState} from 'react'
|
|
|
|
import axios from 'axios';
|
|
|
|
import {Button, Stack, Input } from '@mui/material';
|
|
import Typography from '@mui/material/Typography';
|
|
import {Card, CardActions, CardContent, CardMedia } from '@mui/material'
|
|
import {Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from '@mui/material'
|
|
|
|
|
|
const baseURL = "http://localhost:8000/api"
|
|
|
|
const PictureCard = (props) => {
|
|
const { type, article, pictureType, onChange } = props;
|
|
|
|
const [openAddDialog, setOpenAddDialog] = useState(false);
|
|
const [uploadFile, setUploadFile] = useState(null);
|
|
const [error, setError] = useState(false);
|
|
//const [image, setImage] = useState(eval("article."+pictureType));
|
|
|
|
const handleClick = () => {
|
|
setOpenAddDialog(true);
|
|
}
|
|
|
|
const handleClose = () => {
|
|
setOpenAddDialog(false);
|
|
};
|
|
|
|
const handleUploadSelection = (e) => {
|
|
//console.log(e.target.files[0])
|
|
setUploadFile(e.target.files[0]);
|
|
};
|
|
|
|
const handleUpload = (event) => {
|
|
event.preventDefault()
|
|
const formData = new FormData();
|
|
formData.append("fileTitle", pictureType);
|
|
formData.append("uploadedFile", uploadFile);
|
|
axios.post(baseURL+'/article/post_articleImage/'+article.pk, formData, {
|
|
headers: {
|
|
'content-type': 'multipart/form-data'
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
setOpenAddDialog(false);
|
|
//console.log(response);
|
|
//setImage(eval("response.data."+pictureType))
|
|
onChange(response.data)
|
|
})
|
|
.catch(function (error) {
|
|
//console.log(error);
|
|
setError(true);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card sx={{ maxWidth: 345 }}>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h5" component="div">
|
|
{type}
|
|
</Typography>
|
|
</CardContent>
|
|
<CardMedia
|
|
component="img"
|
|
height="450"
|
|
image={eval("article."+pictureType)}
|
|
title="Bild"
|
|
sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
|
|
/>
|
|
<CardActions>
|
|
<Button size="small" onClick={handleClick}>
|
|
{eval("article."+pictureType) === null ? "Bild hinzufügen" : "Neues Bild"}
|
|
</Button>
|
|
<Dialog open={openAddDialog} onClose={handleClose}>
|
|
<DialogTitle>Bild hinzufügen</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
Bild auswählen und uploaden
|
|
</DialogContentText>
|
|
<Stack container spacing={1}>
|
|
<Input
|
|
accept="image/*"
|
|
id="contained-button-file"
|
|
multiple type="file"
|
|
onChange={handleUploadSelection}
|
|
//error={error.toString()}
|
|
/>
|
|
|
|
<Typography gutterBottom variant="subtitle1" component="div" color="red">
|
|
{error ? "Fehler beim uploaden des Files!" : ""}
|
|
</Typography>
|
|
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleClose}>
|
|
Abbrechen
|
|
</Button>
|
|
<Button onClick={handleUpload}>
|
|
Hinzufügen
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default PictureCard |