ReactJS / Axios / Django: Обновление формы текущим изображением из API

Я пытаюсь создать форму обновления в React, обновление работает нормально, так как я установил значения по умолчанию, которые приходят из (метод get) с помощью axios и установил их как значения по умолчанию, если они не изменены. Я получаю существующее изображение из API и устанавливаю его как значение по умолчанию в форме обновления React, если изображение обновлено, получаю новое (это работает нормально), если изображение не обновлено, помещаю существующее изображение, полученное из API, которое не работает, получаю следующее сообщение:

{image: ["The submitted data was not a file. Check the encoding type on the form."]}

мой код:

Реакция:

export function ProductUpdate() {
  const [p, setProduct] = useState("")
  const {slug} = useParams()

  useEffect(() => {
    function featchProduct() {
      axios.get(API.products.retrive(slug))
        .then(res => {
          setProduct(res.data)
        })

    }
    featchProduct()
  } ,[])
  

  const [loading, setLoading] = useState(false)
  const [title, setTitle] = useState("")
  const [image, setImage] = useState(null)
  const [description, setDescription] = useState("")
  const [price, setPrice] = useState("")
  const [active, setActive] = useState("")
  const [soldout, setSoldout] = useState("")


  const handleSubmit = (event) => {
    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 => {
      console.log(res.data)
    }))

  }

API-данные:

active: true
description: "1"
image: "http://127.0.0.1:8888/media/product_images/5000_IJFmXgH.png"
price: 1111
slug: "p232323"
soldout: true
title: "Product Name"

Форма изображения

    <Form.Control
    type="file"
    name="image"
    onChange={(e) => setImage(e.target.files[0])}
    /></Form.Group>

Вернуться на верх