I have the component UploadImage and, i would like to use a Modal, to show a information if the image is already upload, in the same way that Confirm (from Modal in antdesign), did it before.
I prefer use bootstrap instead antdesign.
I did try to create a new function inside the conditional to call de Modal, but not works. I did try to call Modal inside a return in the function.
I see that the modal only works inside the return of the parent function. In this case UploadImage.
Is this possible?.
function UploadImage({ input }) {
const [show, setShow] = useState(false);
const onDrop = useCallback((file) => {
input.onChange(file);
getImages()
.then((imagesFolder) => {
console.log(imagesFolder);
console.log(show);
if(imagesFolder.includes(file[0].name)){
/* confirm({
title: "Replacing Image",
content: `The image ${file[0].name} already exists in the database. Do you want to replace it?`,
okText: "Replace",
okType: "danger",
cancelText: "Cancel",
onOk() {
setImage(file);
}
}); */
}else{
console.log('NO TENGO LA IMAGEN,,,,');
setImage(file);
}
})
.catch (error => console.log(error));
},[setImage]);
const { getRootProps, getInputProps} = useDropzone({
accept: "image/jpeg",
noKeyboard: true,
onDrop,
});
const handleRemoveClick = () => {
setShow(true);
};
return (
<div>
{image.length === 0 ? (
<div {...getRootProps()}>
<input {...getInputProps()} />
<div className="btn btn-primary" >Click or Drag to Upload</div>
</div>
) :(
<div>
<Modal show={show}>
<Modal.Header>Seguro que quieres borrar la foto ?</Modal.Header>
<Modal.Footer>
<div className="btn btn-outline-danger" onClick={e => {e.preventDefault(), setImage([]);}}>Delete</div>
<div className="btn btn-outline-success" onClick={e => {e.preventDefault(), setShow(false);}}>Cancel</div>
</Modal.Footer>
</Modal>
{image[0].name} <div className="btn btn-outline-danger ms-3" onClick={() => handleRemoveClick()}><i className="bi bi-trash"></i> </div>
</div>
)}
</div>
);
}
};
Thanks if not.....can i combine with antDesign?