I have this fucntion that makes a put request, it works but how would i make it send an image as well?

const myFunc = () => {
  async function postData() {
    const response = await fetch('http://127.0.0.1:8000/api/createroom', {
      method: 'POST', 
      mode: 'cors', 
      cache: 'no-cache', 
      credentials: 'same-origin', 
      headers: {
        'Content-Type': 'Content-Type': 'application/json'
      },
      redirect: 'follow', 
      referrerPolicy: 'no-referrer', 
      body: JSON.stringify({
        name: document.getElementById('name').value,
        description: document.getElementById('desc').value,
        host: document.getElementById('host').value,
      })
    });
    return response.json();
  }
  postData()
}

I've added the field

<input type="file" id="img" name="img" accept="image/*" />

Then modified my function like so to accommodate the image but it doesn't work for some reason

const myFunc = () => {
  async function postData() {
    const myInput = document.getElementById('img')
    const response = await fetch('http://127.0.0.1:8000/api/createroom', {
      method: 'POST', 
      mode: 'cors', 
      cache: 'no-cache', 
      credentials: 'same-origin', 
      headers: {
        'Content-Type': 'multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD'
        
      },
      redirect: 'follow', 
      referrerPolicy: 'no-referrer', 
      body: JSON.stringify({
        name: document.getElementById('name').value,
        description: document.getElementById('desc').value,
        host: document.getElementById('host').value,
        roomimage: myInput.files[0]
      })
    });
    return response.json();
  }
  postData()
}

what could I be doing wrong? My backend is in Django and it works when I test it in postman so I don't think my backend is the issue.