Estoy tratando de crear un formulario para cargar una imagen y luego configurarlo como una imagen destacada para una publicación que se creará una vez que se complete la carga.

Estoy usando WordPress como backend y Next.js como front-end.

Mi tipo de código funciona. La imagen se carga y recibo una respuesta con un ID de archivo adjunto generado. Incluso muestra el tamaño correcto de KB en el servidor, pero no genera los tamaños de imagen de WordPress. Al descargar la imagen del servidor, está en blanco. Parece estar corrupto.

Por razones de seguridad, necesito enviar los datos del formulario a un punto final personalizado de la API Next.js donde puedo usar el token de autenticación JWT para autorizar el comando.

Formulario.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) }

páginas/api/añadir-imagen.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 }) }

Cuando agrego la autorización a Form.js y realizo la solicitud sin enviar los datos al extremo de la API de Next.js, la imagen se carga, WordPress genera tamaños personalizados y está ahí. Pero esto parece ser inseguro y no una solución.

Entonces, mi pregunta es, ¿qué está causando esto y cómo puedo cargar imágenes de forma segura usando Next.js?

¿Me estoy perdiendo una configuración en el objeto Encabezados? ¿FormData se convierte en un tipo de datos diferente cuando pasa por la API de Next.js? ¿Es un problema de Next.js?