I'm trying to upload a cropped image via client using fetch. The upload process works, the file size seems to be correct too but the uploaded image is corrupt and appears to be a white 16x16 square on the server. The file won't open when I download it (damaged or corrupt). I'm struggling to understand what I'm doing wrong. The back-end is Drupal.

Uploading files directly from an input using the same postFile function works without a problem.

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'
    });
};

The file object: