Setting the value of a MUI file TextField causes an exception

Question

I"m trying to set the value of a MUI Textfield that has type="file" props,
and this exception appears in the console:
Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable
Only an empty string doesn't causing this exception.

Here is my component:

const MyComponent = () => {
  const [image, setImage] = useState("");

  const handleImageChange = (event) => {
    event.preventDefault();
    let reader = new FileReader();
    let file = event.target.files[0];
    reader.onloadend = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(file);
  };

  return (
    <TextField
      helperText="Cover photo"
      type="file"
      value={image}
      onChange={handleImageChange}
    />
  );
};

I tried to simplify the component (still same exception):

<TextField type="file" value={"https://www.someSite.com/image.jpg"} />

Also, I tried to set the value of the input itself using InputProps, still the same exception.

According to MUI Docs value could be 'any' regardless the type:

Maybe this link has your solution https://stackoverflow.com/questions/40589302/how-to-enable-file-upload-on-reacts-material-ui-simple-input — Adrian Naranjo, Jan 17 '23 at 23:11
I saw this one before I posted my question, but the solutions they offered are different from what I"m trying to do: to upload an image and display the url as string - the same functionality as a regular HTML input — I.sh., Jan 17 '23 at 23:21

score 1 · Accepted Answer · answered Jan 17 '23 at 23:46

One solution for your problem would be this:

You are trying to set a string in an input file, I will explain next steps to solve this

Create an input file hidden and his ref
Add an icon inside InputProps from your main TextField
Add onClick to this icon to call refs input to pop up to choose file
Add onChange to input file to call your previous method created (handleImageChange)
Assign value image string to main TextField

This is an example code that works:

export default function App() {
  const inputFileRef = useRef(null)
  const [image, setImage] = useState("")
  const handleClickInputFile = () => {
    inputFileRef.current.click()
  }

  const handleChangeInputFile = (event) => {
    event.preventDefault();
    let reader = new FileReader();
    let file = event.target.files[0];
    reader.onloadend = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(file);
  }
  return (
    <div className="App">
      <TextField value={image} onChange={(event => setImage(event.target.value))} multiline fullWidth  InputProps={{
            endAdornment: <InputAdornment position="start" onClick={handleClickInputFile} style={{cursor:"pointer"}}>Click</InputAdornment>,
          }}/>
      <input type="file" ref={inputFileRef} onChange={handleChangeInputFile} style={{display:"none"}}/>
    </div>
  );
}

Now you can change the click text by an icon from mui and that's it!

You can check this codesandbox to see the final solution works

Let me know if you have any problem

Setting the value of a MUI file TextField causes an exception

1 Answers1