Creé una carga de imagen y eliminé la imagen cargada. Una vez que cargue la imagen, podemos eliminarla nuevamente e ingresar otra imagen. Pero no puedo ingresar la misma imagen otra vez.
const [image, setImage] = useState<any>("noImage"); const [isImageUploaded, setIsImageUploaded] = useState<boolean>(false); const handleImageChange = (event: any) => { setImage(URL.createObjectURL(event.target.files[0])); setIsImageUploaded(true); }; const handleOnImageRemoveClick = () => { setIsImageUploaded(false); setImage("noImage"); }; <span> <input type="file" className="d-none" onChange={handleImageChange} disabled={isImageUploaded} /> {isImageUploaded ? ( <div> <div className="d-flex justify-content-center"> <Button variant="warning" onClick={handleOnImageRemoveClick}> Remove Image </Button> </div> </div> ) : ( <div> <p>Click to upload the image</p> </div> )} </span>No estás vaciando correctamente tu entrada. Te recomendaría usar una ref con useRef . También puede acortar su código teniendo solo el estado de la image , así:
const [image, setImage] = useState<any>("noImage"); const inputRef = useRef<any>(null); // import useRef from react const handleImageChange = (event: any) => { setImage(URL.createObjectURL(event.target.files[0])); }; const handleOnImageRemoveClick = () => { setImage("noImage"); inputRef.current.value=""; }; <span> <input ref={inputRef} type="file" className="d-none" onChange={handleImageChange} disabled={image !== "noImage"} /> {image !== "noImage" ? ( <div> <div className="d-flex justify-content-center"> <Button variant="warning" onClick={handleOnImageRemoveClick}> Remove Image </Button> </div> </div> ) : ( <div> <p>Click to upload the image</p> </div> )} </span>Creo que debería restablecer currentTarget.value así.
<input ... onClick={(event)=> { event.currentTarget.value = null }} /> // TS onClick={(event) => { (event.target as HTMLInputElement).value = ''; }}