Image uploaded to WordPress through REST API using Next.js API Endpoint gets uploaded, but is blank

I'm trying to build a form to upload an image and later set it as a Featured Image for a post that will be created after the upload is complete.

I'm using WordPress as backend and Next.js as front-end.

My code sort of works. The image gets uploaded and I get a response with a generated attachment ID. It even shows the correct KB size on the server, but it doesn't generate the WordPress image sizes. When downloading the image from the server, its blank. Appears to be corrupted.

For security reasons I need to send the form-data to a custom Next.js API endpoint where I can use JWT authentication token to authorize the command.

Form.js

  const handleFormSubmit = async (data) => {
    const formData = new FormData()
    formData.append('file', data.locationImage[0])

    const addImage = await fetch('/api/add-image', {
      method: 'POST',
      body: formData,
      headers: new Headers({
        'Content-Type': 'multipart/form-data',
        'Content-Disposition': `attachment; filename=${data.locationImage[0].name}`,
      }),
    })
    const imageID = await addImage.json()
    console.log(imageID)
  }

pages/api/add-image.js

import { fetchRefreshToken } from 'graphql/api'

export default async function handler(req, res) {
  const file = req.body

  const getToken = await fetchRefreshToken()
  const refreshToken = getToken?.login.refreshToken
  const uploadImage = await fetch(
    'https://mywordpresswebsite.com/wp-json/wp/v2/media',
    {
      body: file,
      method: 'POST',
      headers: new Headers({
        Authorization: `Bearer ${refreshToken}`,
        'Content-Disposition': `${req.headers['content-disposition']}`,
      }),
    },
  )

  const uploadedImage = await uploadImage.json()

  res.status(200).json({ result: uploadedImage })
}

When I add the Authorization to Form.js and make the request without sending the data to Next.js API Endpoint, the image gets uploaded, WordPress generates custom sizes and its there. But this seems to be unsecure and not a solution.

So, my question is, what is causing this and how can I upload images securely using Next.js?

Am I missing a setting on the Headers object? Does the formData become a different data type when it goes through the Next.js API? Is it a Next.js problem?

Recommended topics

Hot tags