title: How to fix Failed to set the 'value' property on 'HTMLInputElement' for react?
body: <p>I am working on Nextjs and try to upload a single file. Every time I attach new file, then I get this error at the console log.</p>
  
  <p>At the console, I see this error:</p>
  
  <pre><code>Warning: A component is changing an uncontrolled input of type file to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
  </code></pre>
  
  <p>Then, the second one is:</p>
  
  <pre><code>react-dom.development.js:2592 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
  </code></pre>
  
  <p>Here is my sample code:</p>
  
  <ol>
  <li>HTML path at render function</li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div className="form-group"&gt;
    &lt;label htmlFor="p_file"&gt;Image&lt;/label&gt;
    &lt;input
      id="p_file"
      type="file"
      className="form-control-file"
      value={formData.image}
      onChange={ e =&gt; onChangeImage(e)} /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol start="2">
  <li>Javascript path</li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>const [formData, setFormData] = useState({
    ...,
    image: undefined
  });
  
  const onChangeImage = event =&gt; {
    console.log(event.target.files[0]);
    setFormData( prev =&gt; ({
      ...prev,
      image: event.target.files[0]
    }));
  }
  </code></pre>