I'm encountering an issue where the image previews are overlapping with the text in another div.
Here are the screenshots: the first one shows how it looks before the preview, and the second one shows what happens when images are added: https://i.sstatic.net/ZSHcU.png
https://i.sstatic.net/Kixao.png
You can see that they are overlapping with the text content.
It's worth noting that I am using next.js and tailwindcss for this project.
Below is the code snippet causing the issue:
<div>
<div className="font-semibold text-[22px] mt-[48px] mb-[16px]">
Photos
</div>
<div className="mb-[24px] text-[16px]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="w-[653px] h-[259px]">
<DragDropUpload />
</div>
</div>
<div>
<div className="font-semibold text-[22px] mt-[48px] mb-[16px]">
Pink Slip
</div>
<div className="mb-[24px] text-[16px]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="w-[653px] h-[259px]">
<DragDropUpload />
</div>
</div>
The DragDropUpload component handles upload logic, here's the relevant code:
import { useState } from "react";
const DragDropUpload = () => {
const [files, setFile] = useState<any | []>([]);
const [message, setMessage] = useState<any | null>(null);
const handleFile = (e: any) => {
setMessage(null);
let file = e.target.files;
for (let i = 0; i < file.length; i++) {
const fileType = file[i]["type"];
const validImageTypes = ["image/jpeg", "image/png"];
if (validImageTypes.includes(fileType)) {
setFile((prev: any) => {
return [...prev, file[i]];
});
} else {
setMessage("Only images are accepted");
}
}
};
return (
<>
<div className="flex justify-center items-center px-2">
<div className="h-auto">
<span className="flex justify-center items-center bg-white text-[12px] text-red-500">
{message}
</span>
<div className="h-[259px] w-[653px] border-2 border-dashed border-gray-400 overflow-hidden relative items-center rounded-md cursor-pointer">
<input
type="file"
onChange={handleFile}
className="h-[259px] w-[653px] opacity-0 z-10 absolute"
name="files[]"
multiple
/>
<div className="h-[259px] w-[653px] bg-white absolute z-1 flex justify-center items-center top-0">
<div className="flex flex-col">
<span className="text-[16px] mb-[2.5px] ">{`Drag and Drop here`}</span>
<span className="text-[16px] ml-[67px] mb-[8.5px]">or</span>
<span className="text-center text-[16px] w-[135px] h-[39px] p-[7px] ml-2 rounded-full bg-black text-white ">
Select file
</span>
</div>
</div>
</div>
**// IMAGE PREVIEW IS HAPPENING HERE !!!!!!!!**
<div className="grid grid-cols-5 w-[659px] gap-[10px] mt-[24px] ">
{files.map((file: any, key: any) => {
return (
<div
key={key}
className="h-[117px] w-[117px] flex justify-between rounded-lg bg-white"
>
<div className="gap-2">
<div className="h-[117px] w-[117px] ">
<img
className="h-[117px] w-[117px] rounded-lg"
src={URL.createObjectURL(file)}
/>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</>
);
};
export default DragDropUpload;
I would appreciate any assistance in resolving this issue as I'm unable to figure it out on my own.