title: Trouble uploading image with InertiaJS, React and Laravel
body: <p>The job is very simple: Take postTitle, postBody and postImage as input and update them in database. But I am facing difficulties uploading the image, hope someone will help me. I am using InertiaJs, React and Laravel.</p>
  <p>My EditPost.jsx file:</p>
  <pre class="lang-js prettyprint-override"><code>import {React, useState, useEffect} from 'react'
  import Layout from '../Shared/Layout'
  import { useForm } from '@inertiajs/inertia-react'
  
  function EditPost({errors, postId, postTitle, postBody, postImage}) {
      const { data, setData, put, progress } = useForm({
          postTitle: postTitle,
          postBody: postBody,
          postImage: null
      })
  
      const onSubmitHandler = (e) =&gt; {
          e.preventDefault()
          put('/posts/update/' + postId)
      }
  
      return (
          &lt;div className=&quot;container&quot;&gt;
              &lt;div className=&quot;row justify-content-center&quot;&gt;
                  &lt;div className=&quot;col-md-8&quot;&gt;
                      &lt;br/&gt;
                      &lt;br/&gt;
                      &lt;h3 className=&quot;text-center&quot;&gt;Edit the post&lt;/h3&gt;
                      &lt;form onSubmit={onSubmitHandler}&gt;
                          &lt;div className=&quot;mb-3&quot;&gt;
                              &lt;label htmlFor=&quot;postTitle&quot; className=&quot;form-label&quot;&gt;Post title&lt;/label&gt;
                              &lt;input value={data.postTitle} onChange={e =&gt; setData('postTitle', e.target.value)} type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;postTitle&quot; placeholder=&quot;Enter post title here...&quot; /&gt;
                              {errors.postTitle &amp;&amp; &lt;p className=&quot;text-danger&quot;&gt;{errors.postTitle}&lt;/p&gt;}
                          &lt;/div&gt;
                          &lt;div className=&quot;mb-3&quot;&gt;
                              &lt;label htmlFor=&quot;postBody&quot; className=&quot;form-label&quot;&gt;Post body&lt;/label&gt;
                              &lt;input value={data.postBody} onChange={e =&gt; setData('postBody', e.target.value)} type=&quot;text&quot; className=&quot;form-control&quot; id=&quot;postBody&quot; placeholder=&quot;Enter post body here...&quot; /&gt;
                              {errors.postBody &amp;&amp; &lt;p className=&quot;text-danger&quot;&gt;{errors.postBody}&lt;/p&gt;}
                          &lt;/div&gt;
                          &lt;div className=&quot;mb-3&quot;&gt;
                              &lt;label htmlFor=&quot;postImage&quot; className=&quot;form-label&quot;&gt;Post body&lt;/label&gt;
                              &lt;input type=&quot;file&quot; className=&quot;form-control&quot; id=&quot;postImage&quot; value={data.postImage} onChange={e =&gt; setData('postImage', e.target.files[0])}  /&gt;
                              {errors.postImage &amp;&amp; &lt;p className=&quot;text-danger&quot;&gt;{errors.postImage}&lt;/p&gt;}
                          &lt;/div&gt;
                          {progress &amp;&amp; (
                              &lt;progress value={progress.percentage} max=&quot;100&quot;&gt;{progress.percentage}%
                          &lt;/progress&gt;
                          )}
                          &lt;br/&gt;
                          &lt;button className=&quot;btn btn-success rounded&quot;&gt;Submit&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      )
  }
  
  EditPost.layout = page =&gt; &lt;Layout pageTitle={'Edit the Post'} children={page}/&gt;
  
  export default EditPost
  </code></pre>
  <p>I am following the <a href="https://inertiajs.com/file-uploads" rel="nofollow noreferrer">InertiaJS documentation</a> but getting this warning in console:</p>
  <pre><code>Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
      [.......]
  </code></pre>
  <p>If I ignore the error and select file, I get the following errors:</p>
  <pre><code>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.
  
  react_devtools_backend.js:2556 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.
  
  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>Please help me out...</p>