设置 MUI 文件 TextField 的值导致异常

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 :

Answer 1

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