0
votes

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?