import { Component , OnInit } from "@angular/core" ; import { Camera , CameraOptions } from "@ionic-native/camera/ngx" ; import { File } from "@ionic-native/file/ngx" ; import * as firebase from "firebase" ; @ Component ( { selector : "app-home" , templateUrl : "home.page.html" , styleUrls : [ "home.page.scss" ] } ) export class HomePage implements OnInit { result ; constructor ( private camera , private file ) { } ngOnInit ( ) { firebase . initializeApp ( { } ) ; } async pickImage ( ) { try { const options = { quality : 80 , destinationType : this . camera . DestinationType . FILE_URI , encodingType : this . camera . EncodingType . JPEG , mediaType : this . camera . MediaType . ALLMEDIA , sourceType : this . camera . PictureSourceType . PHOTOLIBRARY } ; let cameraInfo = await this . camera . getPicture ( options ) ; let blobInfo = await this . makeFileIntoBlob ( cameraInfo ) ; let uploadInfo = await this . uploadToFirebase ( blobInfo ) ; alert ( "File Upload Success " + uploadInfo . fileName ) ; } catch ( e ) { console . log ( e . message ) ; alert ( "File Upload Error " + e . message ) ; } } makeFileIntoBlob ( _imagePath ) { return new Promise ( ( resolve , reject ) => { let fileName = "" ; this . file . resolveLocalFilesystemUrl ( _imagePath ) . then ( fileEntry => { let { name , nativeURL } = fileEntry ; let path = nativeURL . substring ( 0 , nativeURL . lastIndexOf ( "/" ) ) ; console . log ( "path" , path ) ; console . log ( "fileName" , name ) ; fileName = name ; return this . file . readAsArrayBuffer ( path , name ) ; } ) . then ( buffer => { let imgBlob = new Blob ( [ buffer ] , { type : "image/jpeg" } ) ; console . log ( imgBlob . type , imgBlob . size ) ; resolve ( { fileName , imgBlob } ) ; } ) . catch ( e => reject ( e ) ) ; } ) ; } param _imageBlobInfo uploadToFirebase ( _imageBlobInfo ) { console . log ( "uploadToFirebase" ) ; return new Promise ( ( resolve , reject ) => { let fileRef = firebase . storage ( ) . ref ( "images/" + _imageBlobInfo . fileName ) ; let uploadTask = fileRef . put ( _imageBlobInfo . imgBlob ) ; uploadTask . on ( "state_changed" , ( _snapshot ) => { console . log ( "snapshot progess " + ( _snapshot . bytesTransferred / _snapshot . totalBytes ) * 100 ) ; } , _error => { console . log ( _error ) ; reject ( _error ) ; } , ( ) => { resolve ( uploadTask . snapshot ) ; } ) ; } ) ; } }