"use client" import { useState, useRef, useEffect } from "react" export function EditPhotos({ initialPhotos }: { initialPhotos: any[] }) { const [existingPhotos, setExistingPhotos] = useState(initialPhotos) const [deletedIds, setDeletedIds] = useState([]) const [newFiles, setNewFiles] = useState<{file: File, preview: string}[]>([]) const hiddenInputRef = useRef(null) const totalPhotos = existingPhotos.length + newFiles.length const handleFileChange = (e: React.ChangeEvent) => { if (!e.target.files || e.target.files.length === 0) return const files = Array.from(e.target.files) const validFiles = files.filter((file) => { if (file.size > 10 * 1024 * 1024) { alert(`Fișierul "${file.name}" depășește limita de 10 MB.`) return false } return true }) const remaining = 5 - totalPhotos const toProcess = validFiles.slice(0, remaining) const newFilesWithPreview = toProcess.map(file => ({ file, preview: URL.createObjectURL(file) })) setNewFiles(prev => [...prev, ...newFilesWithPreview]) e.target.value = "" // Reset input } const handleDeleteExisting = (id: string) => { setExistingPhotos(prev => prev.filter(p => p.id !== id)) setDeletedIds(prev => [...prev, id]) } const handleDeleteNew = (index: number) => { setNewFiles(prev => { const updated = [...prev] URL.revokeObjectURL(updated[index].preview) // cleanup updated.splice(index, 1) return updated }) } // Update the hidden file input with the accumulated files using DataTransfer useEffect(() => { if (hiddenInputRef.current) { const dt = new DataTransfer() newFiles.forEach(nf => dt.items.add(nf.file)) hiddenInputRef.current.files = dt.files } }, [newFiles]) return ( <>

III. Fotografii ({totalPhotos} / 5)

{existingPhotos.map((photo: any) => (
{/* eslint-disable-next-line @next/next/no-img-element */} {photo.filename}
{photo.filename}
))} {newFiles.map((nf, index) => (
{/* eslint-disable-next-line @next/next/no-img-element */} {nf.file.name}
NOU
{nf.file.name}
{/* Native HTML input name works like array for the backend form tracking */}
))}
{totalPhotos < 5 ? (
) : (

Ai atins limita maximă de 5 fotografii per intrare.

)} {/* Hidden input to pass multipart DataTransfer files to the Server Action */} ) }