Uploading Array of Images in Blobs to Firebase


#1

Not sure if this goes under ionic 2 or tutorials so, anyway, here it is:
Import Provider for Firebase and Camera Plugin > Declare Variables > get Pictures > Convert to Blob > Upload

assignmentadd.ts

import { Camera } from 'ionic-native';
import { EventData } from '../../providers/event-data';

  a: number = 0;
  homeworkpicturesend = null;
  homeworkpicture = null;

constructor(platform: Platform, public Toast: ToastController, public nav: NavController, public eventData: EventData,)
 this.homeworkpicturesend = []
this.homeworkpicture = [];
presentActionSheet() {
        let actionSheet = this.actionSheetCtrl.create({
          title: 'Add an image',
          buttons: [
            {
              text: 'Camera - Experimental',
              handler: () => {
                this.takePicture();
              }
            }, {
              text: 'Gallery',
              handler: () => {
                this.grabPicture();
              }
            }, {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked');
              }
            }
          ]
        });
        actionSheet.present();
      }

  takePicture() {
    Camera.getPicture({
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: false,
      encodingType: Camera.EncodingType.PNG,

      saveToPhotoAlbum: false
    }).then(imageData => {
      this.homeworkpicture[this.a] = 'data:image/png;base64,' + imageData;
      this.homeworkpicturesend[this.a] = this.eventData.b64toBlob(imageData, 512,"image/png")
      this.a++;
    }, error => {

    });
  }
  grabPicture() {
    Camera.getPicture({
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,

      allowEdit: false,
      encodingType: Camera.EncodingType.PNG,
      saveToPhotoAlbum: false
    }).then(imageData => {
      this.homeworkpicture[this.a] = 'data:image/png;base64,' + imageData;
      this.homeworkpicturesend[this.a] = this.eventData.b64toBlob(imageData, 512,"image/png")
      this.a++;
    }, error => {
    
    });
  }

 createrequest() {
    this.eventData.createRequest(this.homeworkpicturesend)
      this.nav.pop();
    }
  }

homeworkpicture array is used to preview the pictures locally. homeworkpicturesend is used to transform into a blob and send to the database.

Now, in a folder I named “providers” I make a ts file called "event-data.ts"
In this ts file the base64 is converted and sent to the array to be put on my firebase database

event-data.ts

import { Injectable } from '@angular/core';
import firebase from 'firebase';

var metadata = {
contentType: 'image/png'
};
var metadatapdf = {
contentType: 'application/pdf'
};
@Injectable()
export class EventData {
  public eventList: any;
  public RequestPictureRef: any;
  public requestList: any;
  public PictureRef: any;
  public subjectList: any;
  public userProfile: any;
  public TextbookResoursesRef:any;
  constructor() {
    this.RequestPictureRef = firebase.storage().ref('/requestpictures/');
    this.requestList = firebase.database().ref('/requestlist');
    this.userProfile = firebase.database().ref('/userProfile');
    this.PictureRef = firebase.storage().ref('/requestpictures/');
  }

  b64toBlob(b64Data, sliceSize,fileType) {

    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);

      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      var byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }
    let blob
    blob = new Blob(byteArrays, { type: fileType });
    // var url = URL.createObjectURL(blob);
    return blob;
  }

  makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

 createRequest(picturearray:any = null): any {
    return picturearray.forEach(snap => {
          this.RequestPictureRef.child("picturegallery").child(this.makeid()+".png")
          .put(snap, metadata).then((savedPicture) => {
              this.requestList.child("picturedatabase").child("picturegallery").push({
               picture: savedPicture.downloadURL
          });
      })
      })
   }

If there are any errors such as missing variables “)” or “}” I apologize, I had to take out all the irrelevant things.

Shameless Promotion:
Remember to Download Project Jaguar on the Play Store! Get rid of your homework today!


Ionic & Firebase Uploading Blobs Error
#2

Hey Solomon. Nice solution, By the way, you are making extra steps by using an incremental variable to push data to the homeworkpicture array. You can go straight and push data by using the push array method. So, you can delete the assignment from the constructor and declare the variable as following:

private homeworkpicture: any[] = [];

And you will be doing basically the same. Then, instead of:

this.homeworkpicture[this.a] = 'data:image/png;base64,' + imageData;

You can do the following:

this.homeworkpicture.push('data:image/png;base64,' + imageData);

Hence, you will be avoiding the following process:

  1. Check the array at index a and assign the data
  2. Increment the variable a plus 1.
  3. Repeat each steps for each item on the array.

Instead, you will be doing the following:

  1. Push the item to the array.