TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed

Question

I am trying to have a file upload feature in my React application but am running into a problem. When I try to upload a first picture, it works just fine. The file explorer dialog closes and my picture is displayed. Overwriting the picture with another picture from my file explorer also works.

However, when I cancel the file explorer while overwriting, I get the following error:

TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

Here is my relevant code:

showImage = (e) =>{
    this.setState({image: URL.createObjectURL(e.target.files[0])})
  }

render() {
    return (
 <div className="content">
        <input
          accept="image/*"
          className="input"
          id="icon-button-file"
          type="file"
          onChange={this.showImage}
        />
        <label htmlFor="icon-button-file">
       
          <IconButton
            className="image"
            aria-label="upload picture"
            component="span"
          >
             { this.state.image == null ? <AddAPhotoIcon className="icon" /> : 
             <img src={this.state.image} alt="test" className="picture"/> }
             </IconButton>
        </label>
</div>
)

Crissy

Answer 1

I think the error means that the files array could be empty. You perhaps want to check if the array is empty before accessing a member.

if(e.target.files.length !== 0){
      this.setState({image: URL.createObjectURL(e.target.files[0])})
    }

Modestamodeste

Answer 2

I am also facing a similar issue it's because createObjectURL is now depreciated due to security reasons I am attaching a S.O. thread.

The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to HTMLMediaElement.srcObject. The old method was removed because it is less safe, requiring a call to URL.revokeOjbectURL() to end the stream. Other user agents have either deprecated (Firefox) or removed (Safari) this feature.

Try this method:

const handelonchange = (e) => {
    const file = e.target.files[0];
    if(file) {
        const reader = new FileReader();
        reader.onloadend = () => {
            setimage(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

use image state variable in <img src={image} />

thread

Tetrad

Answer 3

 dataURLToBlob(dataurl) {
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    },
 showImage = (e) =>{
   this.setState({image: URL.createObjectURL(dataURLToBlob(e.target.files[0]))})
}

Euroclydon

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Eclipse