{"id":21244157,"url":"https://github.com/aaronksaunders/ionic4-firebase-storage","last_synced_at":"2025-07-10T21:30:28.010Z","repository":{"id":36492587,"uuid":"148262257","full_name":"aaronksaunders/ionic4-firebase-storage","owner":"aaronksaunders","description":"Using Camera for File Upload from Ionic v4 App to Firebase Cloud Storage","archived":false,"fork":false,"pushed_at":"2023-01-07T02:28:14.000Z","size":4781,"stargazers_count":29,"open_issues_count":24,"forks_count":18,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-05T17:43:12.719Z","etag":null,"topics":["blob-storage","file-upload","firebase-database","image","ionic-native","ionic4"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-11T04:54:42.000Z","updated_at":"2024-08-12T19:41:33.000Z","dependencies_parsed_at":"2023-01-17T02:00:43.964Z","dependency_job_id":null,"html_url":"https://github.com/aaronksaunders/ionic4-firebase-storage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronksaunders/ionic4-firebase-storage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionic4-firebase-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionic4-firebase-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionic4-firebase-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionic4-firebase-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/ionic4-firebase-storage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fionic4-firebase-storage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264666021,"owners_count":23646570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blob-storage","file-upload","firebase-database","image","ionic-native","ionic4"],"created_at":"2024-11-21T01:17:26.408Z","updated_at":"2025-07-10T21:30:27.377Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","readme":"# ionic4-firebase-storage\n\n#### See additional content on youtube - https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg\n\u003e Updated October 30th 2019\n\n### Magic of converting image from camera to blob for upload\n\ncamera code is directly copied from the [ionic-native documentation](https://ionicframework.com/docs/native/)\n\n```javascript\nconst options: CameraOptions = {\n  quality: 80,\n  quality: 80,\n  destinationType: this.camera.DestinationType.FILE_URI,\n  encodingType: this.camera.EncodingType.JPEG,\n  mediaType: this.camera.MediaType.ALLMEDIA,\n  sourceType : this.camera.PictureSourceType.PHOTOLIBRARY\n};\n\nlet cameraInfo = await this.camera.getPicture(options);\n```\n\nbe sure to include the [cordova-file plugin](https://ionicframework.com/docs/native/file/) and the [cordova-camera plugin](https://ionicframework.com/docs/native/camera/)\n```javascript\n\n  // FILE STUFF\n  makeFileIntoBlob(_imagePath) {\n    // INSTALL PLUGIN - cordova plugin add cordova-plugin-file\n    return new Promise((resolve, reject) =\u003e {\n      let fileName = \"\";\n      this.file\n        .resolveLocalFilesystemUrl(_imagePath)\n        .then(fileEntry =\u003e {\n          let { name, nativeURL } = fileEntry;\n\n          // get the path..\n          let path = nativeURL.substring(0, nativeURL.lastIndexOf(\"/\"));\n\n          fileName = name;\n\n          // we are provided the name, so now read the file into a buffer\n          return this.file.readAsArrayBuffer(path, name);\n        })\n        .then(buffer =\u003e {\n          // get the buffer and make a blob to be saved\n          let imgBlob = new Blob([buffer], {\n            type: \"image/jpeg\"\n          });\n          \n          // pass back blob and the name of the file for saving\n          // into fire base\n          resolve({\n            fileName,\n            imgBlob\n          });\n        })\n        .catch(e =\u003e reject(e));\n    });\n  }\n```\n  \n### Things to notice in the code\n\nUse the versions of the @ionic/native modules\n\n```json\n  \"@ionic-native/camera\": \"^5.16.0\",\n  \"@ionic-native/core\": \"^5.0.0\",\n  \"@ionic-native/file\": \"^5.16.0\",\n  \"@ionic-native/splash-screen\": \"^5.0.0\",\n  \"@ionic-native/status-bar\": \"^5.0.0\",\n```\n\n```javascript\n// notice the path for the import ends in ngx\nimport { Camera, CameraOptions } from \"@ionic-native/camera/ngx\";\nimport { File } from \"@ionic-native/file/ngx\";\n```\nyou have to do the same when you import the module in app.module.ts\n\n```javascript\nimport { Camera } from '@ionic-native/camera/ngx';\nimport { File } from '@ionic-native/file/ngx';\n\n@NgModule({\n  declarations: [AppComponent],\n  entryComponents: [],\n  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],\n  providers: [\n    File,\n    Camera,\n    StatusBar,\n    SplashScreen,\n    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n```console\nIonic:\n\n   Ionic CLI                     : 5.2.7 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/lib/node_modules/ionic)\n   Ionic Framework               : @ionic/angular 4.11.3\n   @angular-devkit/build-angular : 0.801.3\n   @angular-devkit/schematics    : 8.1.3\n   @angular/cli                  : 8.1.3\n   @ionic/angular-toolkit        : 2.0.0\n\nCordova:\n\n   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)\n   Cordova Platforms : ios 5.0.1\n   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 7 other plugins)\n\nUtility:\n\n   cordova-res : not installed\n   native-run  : 0.2.9 \n\nSystem:\n\n   Android SDK Tools : 26.1.1 (/Users/aaronksaunders/Library/Android/sdk)\n   ios-deploy        : 1.9.4\n   ios-sim           : 8.0.2\n   NodeJS            : v10.15.1 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/bin/node)\n   npm               : 6.11.2\n   OS                : macOS Mojave\n   Xcode             : Xcode 11.1 Build version 11A1027\n\nAarons-iMac:ionic4-firebase-storage aaronksaunders$ \n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fionic4-firebase-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fionic4-firebase-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fionic4-firebase-storage/lists"}