How send the cropped image to the server?

[SmashPlusUltra]

I've overriden the submit so I can assing the cropped image to the formData

 const onSubmit = data => {
        let list = new DataTransfer();
        **let file = new File([croppedImage], 'filename.jpg', { type: 'image/jpeg' });
        formData.append('formFile', file );**
        fetch("https://localhost:44325/api/Account/" + account.id, {
        method: 'PUT', 
        body: formData
        }
    })
    }

But on the server it's save as broken file. If I upload the original e.target.files[0] it works fine in the server.
I'm using the code from one of your examples, and from CanvasUtil
// As Base64 string
return canvas.toDataURL('image/jpeg');
The same happens if I use the "As a Blob" code.
Any ideas or thoughts to share?

[ValentinH]

I don't really know how to do this. On our website, we don't upload the image with the form on submit but when the image is cropped. There we upload it as base64 and the API simply return a temporary asset id. Then we send this asset id when the form is submitted and the API deals with it.

[SmashPlusUltra]

Thank you for your answer, I've uploaded the file as base64 string and converted in the server, and works that way.