I'm pasting an image and then creating it as a File object, afterwards I append it into formData and it shows as empty, no file is appended.

pasting event:

const handlePaste = async function (e) {
        if (!e.clipboardData.files.length) {
            return console.log('no images sent');
        }

        const clipboardItems = e.clipboardData.items;
        const items = [].slice.call(clipboardItems).filter(function (item) {
            // Filter the image items only
            return item.type.indexOf('image') !== -1;
        });

        if (items.length === 0) {
            return;
        }

        const pastedImageFile = items[0].getAsFile();

        const image = {
            preview: URL.createObjectURL(pastedImageFile),
            data: pastedImageFile,
        }

        setPastedImage(image);
        setSendingPasted(true);
    }

I check image.data and it shows that the File object is there, Now that I have image.data as a file, I load it into formData:

const imageFile = new FormData();
imageFile.append('image', pastedImage.data, pastedImage.data.name);
imageFile.append('username', 'Chris');

printing out imageFile:

for (var pair of imageFile.entries()) {
    console.log(pair[0]+ ', ' + JSON.stringify(pair[1]));
}

returns:

image, {}
username, "Chris"

What am I doing wrong?