use-vibes
Version:
Transform any DOM element into an AI-powered micro-app
57 lines • 2.61 kB
JavaScript
import * as React from 'react';
import { combineClasses } from '../../utils/style-utils';
import '../ImgGen.css';
/**
* Simple file drop zone component for handling image uploads
*/
export function ImgGenFileDrop({ onFilesDropped, className, isActive = true, maxFiles = 10, debug, addFilesMessage = 'Drop images here or click to browse', }) {
const fileInputRef = React.useRef(null);
const [isDragging, setIsDragging] = React.useState(false);
const handleDragOver = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
}, []);
const handleDragLeave = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
}, []);
const handleClick = React.useCallback(() => {
if (isActive && fileInputRef.current) {
fileInputRef.current.click();
}
}, [isActive]);
const processFiles = React.useCallback((fileList) => {
if (!isActive)
return;
const files = Array.from(fileList);
if (files.length === 0)
return;
// Apply max files limit
const filesToProcess = files.slice(0, maxFiles);
if (debug) {
console.log(`[ImgGenFileDrop] Processing ${filesToProcess.length} files of ${files.length} selected`);
}
// Filter out non-image files
const imageFiles = filesToProcess.filter((file) => file.type.startsWith('image/'));
if (imageFiles.length > 0) {
onFilesDropped(imageFiles);
}
}, [isActive, maxFiles, onFilesDropped, debug]);
const handleDrop = React.useCallback((e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
processFiles(e.dataTransfer.files);
}, [processFiles]);
const handleFileInput = React.useCallback((e) => {
if (e.target.files?.length) {
processFiles(e.target.files);
}
}, [processFiles]);
return (React.createElement("div", { className: combineClasses('imggen-file-drop', isDragging ? 'imggen-file-drop-active' : '', !isActive ? 'imggen-file-drop-disabled' : '', className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick },
React.createElement("input", { type: "file", ref: fileInputRef, accept: "image/*", onChange: handleFileInput, multiple: true, style: { display: 'none' } }),
React.createElement("div", { className: "imggen-file-drop-message" }, addFilesMessage)));
}
//# sourceMappingURL=ImgGenFileDrop.js.map