Estoy tratando de cargar una imagen recortada a través del cliente usando fetch. El proceso de carga funciona, el tamaño del archivo también parece ser correcto, pero la imagen cargada está dañada y parece ser un cuadrado blanco de 16x16 en el servidor. El archivo no se abre cuando lo descargo (dañado o corrupto). Estoy luchando por entender lo que estoy haciendo mal. El back-end es Drupal .

La carga de archivos directamente desde una input usando la misma función postFile funciona sin problemas.

 const toFile = (blob) => { blob.lastModifiedDate = new Date(); blob.name = 'cropped.png'; return blob; } const onCropperCrop = () => { const imageElement = cropperRef?.current; const cropper = imageElement?.cropper; cropper.getCroppedCanvas().toBlob((blob) => { const file = toFile(blob); onCrop(file); }); }; const onCrop = (file) => postFile(params); export const postFile = async ( _file, _uri, _xcsrf_token, _accessToken, ) => { let formData = new FormData(); formData.append('File', _file); let headers = { headers: { Accept: 'application/hal+json', 'Content-Type': 'application/octet-stream', 'Content-Disposition': 'file; filename="' + _file.name + '"', 'X-CSRF-Token': _xcsrf_token, Authorization: 'Bearer ' + _accessToken, }, }; return await fetch(_uri, { method: 'POST', headers: headers, body: formData, credentials: 'include' }); };

El objeto del archivo: