Image created without filetype - need filetype for compression - Angular 2 / Ionic 3

Question

I am trying to compress an image client-side (Angular 2/Ionic 3) and When I log the file that is created by the camera, it says:

"type":null when it should say "type":'image/jpeg' .

I am using the Ionic camera plugin to handle taking a picture or choosing one from the photo library, after that (I assume) the file is created without a type. Every compression tool I have tried has had this problem, and I have run out of options. Is there a way to change the type of a File object?

Answer 1

I created a new Blob with this method and made sure to give it image type:

dataURItoBlob(dataURI, callback): Promise<any> {
    return new Promise((resolve, reject) => {
      let byteString = atob(dataURI);
      //console.log(byteString);

      // separate out the mime component
      //let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

      // write the bytes of the string to an ArrayBuffer
      let ab = new ArrayBuffer(byteString.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
      }

      // write the ArrayBuffer to a blob, and you're done
      let bb = new Blob([ab], {type: 'image/jpeg'});
      resolve(bb);  

    })
}

I used it after reading the contents of the image to base64 like this and got the resulting blob with image type:

var readerZ = new FileReader();

  readerZ.onload = (e) => {
    let data = readerZ.result.split(',')[1];
    //console.log(data);
    self.dataURItoBlob(data, null).then(blob => {