Upload image to S3 using Slingshot: Invalid image


I’m using the mdg:camera to get a base64 encoded image from the user’s gallery.
To upload the image to Amazon S3 using Slingshot (which requires either a blob or a File, I’m using the following code to convert the base64 string to a File:

this.dataUriToFile = (dataUri, fileName) => { // https://en.wikipedia.org/wiki/Data_URI_scheme // create a pattern to match the data uri var patt = /^data:([^\/]+\/[^;]+)?(;charset=([^;]+))?(;base64)?,/i, matches = dataUri.match(patt); if (matches == null){ throw new Error("data: uri did not match scheme") } var prefix = matches[0], contentType = matches[1], // var charset = matches[3]; -- not used. isBase64 = matches[4] != null, // remove the prefix encodedBytes = dataUri.slice(prefix.length), // decode the bytes decodedBytes = isBase64 ? atob(encodedBytes) : encodedBytes, // return the file object props = {}; if (contentType) { props.type = contentType; } return new File([decodedBytes], fileName, props); }

I’m able to successfully upload the file to S3. Here’s an example of an uploaded image:

However, I’m not able to open the image on the S3 Console.
I’m getting an error: “The image cannot be displayed because it contains errors.”

What could possibly be going wrong?