src/components/ImageUploader.tsx - main - DME/NotesApp

src/components/ImageUploader.tsx
79 строк3 KB
Karasique333
Commit
19 июн 2025, 15:09
19 июн 2025, 15:09d96c829
'use client'

import { useRef } from 'react'
import { Button } from './ui/button'

export default function ImageUploader({
                                          images,
                                          setImages,
                                      }: {
    images: string[]
    setImages: React.Dispatch<React.SetStateAction<string[]>>
}) {
    const inputRef = useRef<HTMLInputElement>(null)

    const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const files = e.target.files
        if (!files) return

        const newImages: string[] = []

        for (const file of Array.from(files)) {
            const reader = new FileReader()
            reader.onloadend = () => {
                if (typeof reader.result === 'string') {
                    setImages((prev) => [...prev, reader.result as string])
                }
            }
            reader.readAsDataURL(file)
        }
    }

    return (
        <div className="mt-6">
            <h4 className="font-semibold mb-2">Изображения</h4>
            <input
                ref={inputRef}
                type="file"
                accept="image/*"
                multiple
                onChange={handleImageChange}
                className="hidden"
            />
            <Button
                onClick={() => inputRef.current?.click()}
                variant="secondary"
                className="mb-4"
            >
                Загрузить изображения
            </Button>

            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {images.map((img, idx) => (
                    <div key={idx} className="relative">
                        <img
                            src={img}
                            alt={`uploaded-${idx}`}
                            className="rounded shadow-md object-cover w-full h-40"
                        />
                        <button
                            onClick={() => {
                                const updated = images.filter((_, i) => i !== idx)
                                setImages(updated)

                                // Если это не base64, а URL существующего изображения — добавить в удалённые
                                if (!img.startsWith('data:')) {
                                    setRemovedImages((prev) => [...prev, img])
                                }
                            }}
                            className="absolute top-1 right-1 bg-red-500 text-white text-xs px-2 py-1 rounded"
                        >
                            ✕
                        </button>
                    </div>
                ))}

            </div>
        </div>
    )
}