AWS S3 getting Not a valid bitmap file

Question

I have been struggling with this for a while and I am going to provide you with as much information as possible (some maybe irrelevant) because I am completely stuck. I am using Ionic and I would like to be able to take a picture with my phone and upload it to an AWS S3 bucket. I used Cordova camera to accomplish this.

As far as I know; these pictures come out in a large base64 string and I have to convert it to a Blob, convert it to a File object then upload that file object into AWS. However, when I do this it always uploads it as something other than an image. Whenever I open it I get an error saying:

"Not a valid bitmap file.  its format is not currently supported."

https://s3.amazonaws.com/mng-moment/moment/PA/40.008446_-75.26046_1502414224619.jpg

Here is an example of a WORKING one (This used to work it somehow broke):

https://s3.amazonaws.com/mng-moment/bestMoments/40.008446_-75.26046_1499659199473.jpg

I tried to open each one in a text editor to see what is going on. For the first one (The broken one) I get this:

When I try to open the working one in a text editor I get this:

Now it seems like a conversion problem but I think I am converting it correctly. Here is the code I am using to upload (You can see the console.logs later on the post):

core.js

awsServices.js

If you look at the comments in the code I labeled some of the console logs. I will display them here for more information:

A - (uploadToAWS):

B - (awsServices.upload):

This is how I convert the dataURI to a Blob (Called in uplpoadToAWS - The first screenshot):

This is what gets passed into the 'dataURI' parameter in the code right above:

If there is any more information please let me know. I've been scratching my head at this for a while. Any help is appreciated. Thanks!

Answer 1

As stated in MDN File API:

A File object is a specific kind of a Blob, and can be used in any context that a Blob can. In particular, FileReader, URL.createObjectURL(), createImageBitmap(), and XMLHttpRequest.send() accept both Blobs and Files.

So, i think your problem reside in your uploadToAws function because you first create a Blob and then use the Blob to create a File, when I think you simply should initialize the File object with the byte array returned by dataURItoBlob since the File object is in fact already a Blob object.