Uploading an image to google cloud storage via fetch to a signed URL results in broken asset?

Question

I have tried reading through the docs, but I have to be honest, I just can't seem to find proper documentation for this.

I need to upload from my react-native client side app to a signed URL. We are NOT going to be using the @google-cloud/storage as our backend provides the public URL "bucket" to upload to. Once I get the bucket IDs, I have this fetch call as a PUT method which uploads as follows:

const asset = {
  uri: string; // local uri path
  width: number;
  height: number;
  base64?: string; // processed image string
};



await fetch(`${data.signedUrl}`, {
    method: 'PUT',
    headers: {
        'Content-Type': mediaInfo.contentType,
    },
    body: result as any,
});

The upload is successful, but when I view my bucket, the image appears to be an invalid asset.

The base64 asset appears to be valid when I paste in the content to a web converter.

The uri string is a local temporary location on the mobile device, so I am not sure this is doing anything.

What is the best way to upload like this, with the data object it actually needs in the body of the request? And is it correct that the request body is not a stringified JSON object?