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!