99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
import React, { useCallback } from 'react';
|
|
import { useDropzone } from 'react-dropzone';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
|
|
const useStyles = makeStyles({
|
|
dropzone: {
|
|
border: '2px dashed #cccccc',
|
|
borderRadius: '8px',
|
|
padding: '40px 20px',
|
|
textAlign: 'center',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s ease',
|
|
backgroundColor: '#fafafa',
|
|
minHeight: '200px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
'&:hover': {
|
|
borderColor: '#999999',
|
|
backgroundColor: '#f0f0f0'
|
|
}
|
|
},
|
|
dropzoneActive: {
|
|
borderColor: '#4CAF50',
|
|
backgroundColor: '#e8f5e8'
|
|
},
|
|
dropzoneText: {
|
|
fontSize: '18px',
|
|
fontFamily: 'roboto',
|
|
color: '#666666',
|
|
margin: '10px 0'
|
|
},
|
|
dropzoneSubtext: {
|
|
fontSize: '14px',
|
|
color: '#999999',
|
|
fontFamily: 'roboto'
|
|
},
|
|
fileCount: {
|
|
fontSize: '16px',
|
|
color: '#4CAF50',
|
|
fontWeight: 'bold',
|
|
marginTop: '10px'
|
|
}
|
|
});
|
|
|
|
function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
|
|
const classes = useStyles();
|
|
|
|
const onDrop = useCallback((acceptedFiles) => {
|
|
// Filter nur Bilddateien
|
|
const imageFiles = acceptedFiles.filter(file =>
|
|
file.type.startsWith('image/')
|
|
);
|
|
|
|
if (imageFiles.length !== acceptedFiles.length) {
|
|
alert('Nur Bilddateien sind erlaubt!');
|
|
}
|
|
|
|
onImagesSelected(imageFiles);
|
|
}, [onImagesSelected]);
|
|
|
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
onDrop,
|
|
accept: {
|
|
'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.bmp', '.webp']
|
|
},
|
|
multiple: true,
|
|
maxSize: 10 * 1024 * 1024 // 10MB pro Datei
|
|
});
|
|
|
|
return (
|
|
<div
|
|
{...getRootProps()}
|
|
className={`${classes.dropzone} ${isDragActive ? classes.dropzoneActive : ''}`}
|
|
>
|
|
<input {...getInputProps()} />
|
|
|
|
<div className={classes.dropzoneText}>
|
|
{isDragActive ?
|
|
'Bilder hierher ziehen...' :
|
|
'Mehrere Bilder hier hinziehen oder klicken zum Auswählen'
|
|
}
|
|
</div>
|
|
|
|
<div className={classes.dropzoneSubtext}>
|
|
Unterstützte Formate: JPG, PNG, GIF, WebP (max. 10MB pro Datei)
|
|
</div>
|
|
|
|
{selectedImages.length > 0 && (
|
|
<div className={classes.fileCount}>
|
|
📸 {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} ausgewählt
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MultiImageDropzone; |