title: ReactJS / Axios / Django: Update form with the current image from API
body: <p>I'm trying to create an update form in React, the update works fine as I have set the default values that coming from (get method) using axios and set them as the default if none changed. I get the existing image from API and set it as default value in React update form, if image updated get the new one(this one is working fine) if image was not updated, put the existing image that was received from the API which is not working, I get this message:</p>
  <pre><code>{image: [&quot;The submitted data was not a file. Check the encoding type on the form.&quot;]}
  </code></pre>
  <p>my code:</p>
  <p>React:</p>
  <pre><code>export function ProductUpdate() {
    const [p, setProduct] = useState(&quot;&quot;)
    const {slug} = useParams()
  
    useEffect(() =&gt; {
      function featchProduct() {
        axios.get(API.products.retrive(slug))
          .then(res =&gt; {
            setProduct(res.data)
          })
  
      }
      featchProduct()
    } ,[])
    
  
    const [loading, setLoading] = useState(false)
    const [title, setTitle] = useState(&quot;&quot;)
    const [image, setImage] = useState(null)
    const [description, setDescription] = useState(&quot;&quot;)
    const [price, setPrice] = useState(&quot;&quot;)
    const [active, setActive] = useState(&quot;&quot;)
    const [soldout, setSoldout] = useState(&quot;&quot;)
  
  
    const handleSubmit = (event) =&gt; {
      event.preventDefault();
      let formField = new FormData()
  
      formField.append('title', title || p.title)
      formField.append('slug', slug)
      formField.append('description', description || p.description)
      formField.append('price', price)
      formField.append('active', active)
      formField.append('soldout', soldout)
      formField.append('image', image || p.image)
  
       axios.put(API.products.update(slug), formField)
      .then((res =&gt; {
        console.log(res.data)
      }))
  
    }
  </code></pre>
  <p>API data:</p>
  <pre><code>active: true
  description: &quot;1&quot;
  image: &quot;http://127.0.0.1:8888/media/product_images/5000_IJFmXgH.png&quot;
  price: 1111
  slug: &quot;p232323&quot;
  soldout: true
  title: &quot;Product Name&quot;
  </code></pre>
  <p>Image form</p>
  <pre><code>    &lt;Form.Control
      type=&quot;file&quot;
      name=&quot;image&quot;
      onChange={(e) =&gt; setImage(e.target.files[0])}
      /&gt;&lt;/Form.Group&gt;
  </code></pre>