0

I have an input to download an image with react, I would like to be able to cancel what has been downloaded if I change my mind for example. So how to return the input to its initial state, i.e. empty? thank you for help.

const [ imageUrl, setImageUrl ] = useState(null);
const uploadImage = (e) =>{
        const file = e.target.files[0]; 
        setImageUrl(file)
    }

    const cancelImage = (e) =>{
        e.preventDefault();
        setImageUrl(null)
    }



<label htmlFor="Image du produit">
  Image du produit:
  <input id="uploadImage" type="file" onChange={uploadImage}/>
  <button onClick={cancelImage}>X</button>
</label>
tony
  • 199
  • 4
  • 15
  • What's wrong with your current code? It looks like it should handle the UI, and there's no code relating to uploading/downloading any images. – DBS Aug 09 '22 at 16:25
  • when I click on the cross to delete the image download it does not work – tony Aug 09 '22 at 16:26

1 Answers1

0

Use ref's in react in order to access the input element. Now when you clicked on button make the input's value to empty ( '' ) using the ref which we have attached.

yashwanth numburi
  • 64
  • 6