title: NextJS, send image file to DjangoREST back-end from API route
body: <p>I have a NextJS application. In the client page I make a request to the API route, which then makes a PATCH request to the Django back-end.</p>
  <p>It does not work and the image does not change, but I am able to successfully change it using something like Postman or Insomnia. Or If I decide to call the back-end directly from the client page.</p>
  <p>Here is the code on the client page:</p>
  <pre><code>const UpdateImageField = async (event: any) =&gt; {
      event.preventDefault()
  
      var formdata = new FormData();
      formdata.append(&quot;coverfield&quot;, event.target.files[0], event.target.files[0][&quot;name&quot;]);
  
      const ress = await fetch(`/api/playlist/playlistimage/${playlistediting[&quot;id&quot;]}`, {
          method: 'PATCH',
          headers: {
              'Accept': 'application/json',
          },
          body: formdata
      });
  }
  </code></pre>
  <p>Here is the code on the API route page:</p>
  <pre><code>export default async (req, res) =&gt; {
      if (req.method === &quot;PATCH&quot;) {
          const {
              playlistid
          } = req.query
  
          const cookies = cookie.parse(req.headers.cookie ?? '');
          const access = cookies.access ?? false;
  
          if (access === false) {
              return res.status(403).json({
                  error: 'User forbidden from making the request'
              });
          }
  
  
          try {
              const apiRes = await fetch(`${API_URL}/playlist_api/playlists/${playlistid}/`, {
                  method: 'PATCH',
                  headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'multipart/form-data; boundary=---WebKitFormBoundary7MA4YWxkTrZu0gW',
                      'Authorization': `Bearer ${access}`
                  },
                  body: req.body
              });
  
              const data = await apiRes.json();
              console.log(data)
  
              if (apiRes.status === 200) {
                  return res.status(200).json({
                      updatedplaylist: data
                  });
              } else {
                  return res.status(apiRes.status).json({
                      error: data.error
                  });
              }
          } catch (err) {
              return res.status(500).json({
                  error: 'Something went wrong when changing the image'
              });
          }
      }
  }
  </code></pre>
  <p>I get a 200 response from the back-end for the PATCH request but the image field does not actually change. I believe this has to do with the file in the request.body from Client Page to the API route.</p>