react-advanced-gallery
Version:
A customizable React image gallery component with Bootstrap styling, fullscreen mode, animations, and support for various media types
64 lines (63 loc) • 3.11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef } from 'react';
export function ImageUploader({ onImageUpload }) {
const [isDragging, setIsDragging] = useState(false);
const fileInputRef = useRef(null);
const validateFile = (file) => {
// Check file type
const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4'];
if (!validTypes.includes(file.type)) {
console.error("Invalid file type. Only JPG, PNG, GIF, WebP, and MP4 files are supported.");
return false;
}
// Check file size (10MB max)
const maxSize = 10 * 1024 * 1024; // 10MB in bytes
if (file.size > maxSize) {
console.error("File too large. Maximum file size is 10MB.");
return false;
}
return true;
};
const handleFiles = (files) => {
const validFiles = Array.from(files).filter(validateFile);
if (validFiles.length > 0) {
onImageUpload(validFiles);
console.log(`Successfully added ${validFiles.length} file(s).`);
}
};
const handleDragEnter = (e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
};
const handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
};
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
};
const handleDrop = (e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
handleFiles(e.dataTransfer.files);
}
};
const handleFileInputChange = (e) => {
if (e.target.files && e.target.files.length > 0) {
handleFiles(e.target.files);
e.target.value = ''; // Reset file input
}
};
const handleButtonClick = () => {
if (fileInputRef.current) {
fileInputRef.current.click();
}
};
return (_jsxs("div", { className: "rag-uploader", children: [_jsx("h2", { className: "rag-uploader-title", children: "Add New Images" }), _jsxs("div", { className: `rag-dropzone ${isDragging ? 'active' : ''}`, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [_jsx("span", { className: "rag-material-icons rag-dropzone-icon", children: "add_photo_alternate" }), _jsx("p", { className: "rag-dropzone-text", children: isDragging ? 'Drop files here' : 'Drag and drop images here, or click to browse' }), _jsx("input", { type: "file", ref: fileInputRef, className: "hidden", multiple: true, accept: "image/jpeg,image/png,image/gif,image/webp,video/mp4", onChange: handleFileInputChange }), _jsx("button", { className: "rag-upload-btn", onClick: handleButtonClick, children: "Select Files" }), _jsx("p", { className: "rag-upload-hint", children: "Supports JPG, PNG, GIF, WebP, and MP4 up to 10MB" })] })] }));
}