Breaking News: Grepper is joining You.com. Read the official announcement!

to upload multiple images and show in 3 by 3 grid

Doyin Atobaru answered on August 15, 2024 Popularity 1/10 Helpfulness 1/10

answer to upload multiple images and show in 3 by 3 grid

to upload multiple images and show in 3 by 3 grid

Comment

'use client'
import { X } from 'lucide-react'
import { useState } from 'react'

const UploadPage = () => {
    const [selectedFiles, setSelectedFiles] = useState<File[]>([])
    const [currentSlide, setCurrentSlide] = useState(0)

    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        if (event.target.files) {
            const filesArray = Array.from(event.target.files)
            setSelectedFiles(prevFiles => [...prevFiles, ...filesArray])
        }
    }

    const removeImage = (index: number) => {
        setSelectedFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
      };

    const handleImageClick = (index: number) => {
        // Logic to handle image click and editing
        console.log('Edit image at index:', index)
    }


    return (
        <div className="flex flex-col items-center justify-center p-6">
            <h1 className="text-3xl font-bold mb-6">Upload Images</h1>
            <div className="mb-6">
                <label className="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
                    Upload Images
                    <input
                        type="file"
                        multiple
                        accept="image/*"
                        onChange={handleFileChange}
                        className="hidden"
                    />
                </label>
            </div>
            <div
            className="relative w-full max-w-4xl">
                <div className="grid grid-cols-3 gap-4">
                    {selectedFiles
                        .slice(currentSlide * 9, (currentSlide + 1) * 9)
                        .map((file, index) => (
                            <div
                                key={index}
                                className="relative cursor-pointer"
                                onClick={() => handleImageClick(index + currentSlide * 9)}
                            >
                                <img
                                    src={URL.createObjectURL(file)}
                                    alt={`uploaded preview ${index}`}
                                    className="w-full h-52 object-cover rounded-3xl shadow-md"
                                />
                                 <button
                onClick={() => removeImage(index + currentSlide * 9)}
                className="absolute flex justify-center items-center -top-3 right-1 bg-gray-500 text-white w-5 h-5 rounded-full p-1 hover:bg-red-600"
              >
                <X />
              </button>
                            </div>
                        ))}
                </div>
               
            </div>
        </div>
    )
}

export default UploadPage

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: grid show upload whatever

Link to this answer
Share Copy Link

Contributed on Aug 15 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

to upload multiple images and show in 3 by 3 grid

Contents

More Related Answers

to upload multiple images and show in 3 by 3 grid

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.