├── .gitignore
├── README.md
├── angular.json
├── browserslist
├── config.xml
├── e2e
├── protractor.conf.js
├── src
│ ├── app.e2e-spec.ts
│ └── app.po.ts
└── tsconfig.e2e.json
├── ionic.config.json
├── ionic.starter.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── resources
├── README.md
├── android
│ ├── icon
│ │ ├── drawable-hdpi-icon.png
│ │ ├── drawable-ldpi-icon.png
│ │ ├── drawable-mdpi-icon.png
│ │ ├── drawable-xhdpi-icon.png
│ │ ├── drawable-xxhdpi-icon.png
│ │ └── drawable-xxxhdpi-icon.png
│ └── splash
│ │ ├── drawable-land-hdpi-screen.png
│ │ ├── drawable-land-ldpi-screen.png
│ │ ├── drawable-land-mdpi-screen.png
│ │ ├── drawable-land-xhdpi-screen.png
│ │ ├── drawable-land-xxhdpi-screen.png
│ │ ├── drawable-land-xxxhdpi-screen.png
│ │ ├── drawable-port-hdpi-screen.png
│ │ ├── drawable-port-ldpi-screen.png
│ │ ├── drawable-port-mdpi-screen.png
│ │ ├── drawable-port-xhdpi-screen.png
│ │ ├── drawable-port-xxhdpi-screen.png
│ │ └── drawable-port-xxxhdpi-screen.png
├── icon.png
├── ios
│ ├── icon
│ │ ├── icon-1024.png
│ │ ├── icon-40.png
│ │ ├── icon-40@2x.png
│ │ ├── icon-40@3x.png
│ │ ├── icon-50.png
│ │ ├── icon-50@2x.png
│ │ ├── icon-60.png
│ │ ├── icon-60@2x.png
│ │ ├── icon-60@3x.png
│ │ ├── icon-72.png
│ │ ├── icon-72@2x.png
│ │ ├── icon-76.png
│ │ ├── icon-76@2x.png
│ │ ├── icon-83.5@2x.png
│ │ ├── icon-small.png
│ │ ├── icon-small@2x.png
│ │ ├── icon-small@3x.png
│ │ ├── icon.png
│ │ └── icon@2x.png
│ └── splash
│ │ ├── Default-568h@2x~iphone.png
│ │ ├── Default-667h.png
│ │ ├── Default-736h.png
│ │ ├── Default-Landscape-736h.png
│ │ ├── Default-Landscape@2x~ipad.png
│ │ ├── Default-Landscape@~ipadpro.png
│ │ ├── Default-Landscape~ipad.png
│ │ ├── Default-Portrait@2x~ipad.png
│ │ ├── Default-Portrait@~ipadpro.png
│ │ ├── Default-Portrait~ipad.png
│ │ ├── Default@2x~iphone.png
│ │ ├── Default@2x~universal~anyany.png
│ │ └── Default~iphone.png
└── splash.png
├── src
├── app
│ ├── app-routing.module.ts
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ └── home
│ │ ├── home.module.ts
│ │ ├── home.page.html
│ │ ├── home.page.scss
│ │ ├── home.page.spec.ts
│ │ └── home.page.ts
├── assets
│ └── icon
│ │ └── favicon.png
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── global.scss
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── test.ts
├── theme
│ └── variables.scss
└── zone-flags.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Specifies intentionally untracked files to ignore when using Git
2 | # http://git-scm.com/docs/gitignore
3 |
4 | *~
5 | *.sw[mnpcod]
6 | .tmp
7 | *.tmp
8 | *.tmp.*
9 | *.sublime-project
10 | *.sublime-workspace
11 | .DS_Store
12 | Thumbs.db
13 | UserInterfaceState.xcuserstate
14 | $RECYCLE.BIN/
15 |
16 | *.log
17 | log.txt
18 | npm-debug.log*
19 |
20 | /.idea
21 | /.ionic
22 | /.sass-cache
23 | /.sourcemaps
24 | /.versions
25 | /.vscode
26 | /coverage
27 | /dist
28 | /node_modules
29 | /platforms
30 | /plugins
31 | /www
32 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ionic4-firebase-storage
2 |
3 | #### See additional content on youtube - https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg
4 | > Updated October 30th 2019
5 |
6 | ### Magic of converting image from camera to blob for upload
7 |
8 | camera code is directly copied from the [ionic-native documentation](https://ionicframework.com/docs/native/)
9 |
10 | ```javascript
11 | const options: CameraOptions = {
12 | quality: 80,
13 | quality: 80,
14 | destinationType: this.camera.DestinationType.FILE_URI,
15 | encodingType: this.camera.EncodingType.JPEG,
16 | mediaType: this.camera.MediaType.ALLMEDIA,
17 | sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
18 | };
19 |
20 | let cameraInfo = await this.camera.getPicture(options);
21 | ```
22 |
23 | be sure to include the [cordova-file plugin](https://ionicframework.com/docs/native/file/) and the [cordova-camera plugin](https://ionicframework.com/docs/native/camera/)
24 | ```javascript
25 |
26 | // FILE STUFF
27 | makeFileIntoBlob(_imagePath) {
28 | // INSTALL PLUGIN - cordova plugin add cordova-plugin-file
29 | return new Promise((resolve, reject) => {
30 | let fileName = "";
31 | this.file
32 | .resolveLocalFilesystemUrl(_imagePath)
33 | .then(fileEntry => {
34 | let { name, nativeURL } = fileEntry;
35 |
36 | // get the path..
37 | let path = nativeURL.substring(0, nativeURL.lastIndexOf("/"));
38 |
39 | fileName = name;
40 |
41 | // we are provided the name, so now read the file into a buffer
42 | return this.file.readAsArrayBuffer(path, name);
43 | })
44 | .then(buffer => {
45 | // get the buffer and make a blob to be saved
46 | let imgBlob = new Blob([buffer], {
47 | type: "image/jpeg"
48 | });
49 |
50 | // pass back blob and the name of the file for saving
51 | // into fire base
52 | resolve({
53 | fileName,
54 | imgBlob
55 | });
56 | })
57 | .catch(e => reject(e));
58 | });
59 | }
60 | ```
61 |
62 | ### Things to notice in the code
63 |
64 | Use the versions of the @ionic/native modules
65 |
66 | ```json
67 | "@ionic-native/camera": "^5.16.0",
68 | "@ionic-native/core": "^5.0.0",
69 | "@ionic-native/file": "^5.16.0",
70 | "@ionic-native/splash-screen": "^5.0.0",
71 | "@ionic-native/status-bar": "^5.0.0",
72 | ```
73 |
74 | ```javascript
75 | // notice the path for the import ends in ngx
76 | import { Camera, CameraOptions } from "@ionic-native/camera/ngx";
77 | import { File } from "@ionic-native/file/ngx";
78 | ```
79 | you have to do the same when you import the module in app.module.ts
80 |
81 | ```javascript
82 | import { Camera } from '@ionic-native/camera/ngx';
83 | import { File } from '@ionic-native/file/ngx';
84 |
85 | @NgModule({
86 | declarations: [AppComponent],
87 | entryComponents: [],
88 | imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
89 | providers: [
90 | File,
91 | Camera,
92 | StatusBar,
93 | SplashScreen,
94 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
95 | ],
96 | bootstrap: [AppComponent]
97 | })
98 | export class AppModule {}
99 | ```
100 |
101 | ```console
102 | Ionic:
103 |
104 | Ionic CLI : 5.2.7 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/lib/node_modules/ionic)
105 | Ionic Framework : @ionic/angular 4.11.3
106 | @angular-devkit/build-angular : 0.801.3
107 | @angular-devkit/schematics : 8.1.3
108 | @angular/cli : 8.1.3
109 | @ionic/angular-toolkit : 2.0.0
110 |
111 | Cordova:
112 |
113 | Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
114 | Cordova Platforms : ios 5.0.1
115 | Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 7 other plugins)
116 |
117 | Utility:
118 |
119 | cordova-res : not installed
120 | native-run : 0.2.9
121 |
122 | System:
123 |
124 | Android SDK Tools : 26.1.1 (/Users/aaronksaunders/Library/Android/sdk)
125 | ios-deploy : 1.9.4
126 | ios-sim : 8.0.2
127 | NodeJS : v10.15.1 (/Users/aaronksaunders/.nvm/versions/node/v10.15.1/bin/node)
128 | npm : 6.11.2
129 | OS : macOS Mojave
130 | Xcode : Xcode 11.1 Build version 11A1027
131 |
132 | Aarons-iMac:ionic4-firebase-storage aaronksaunders$
133 | ```
134 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "defaultProject": "app",
5 | "newProjectRoot": "projects",
6 | "projects": {
7 | "app": {
8 | "root": "",
9 | "sourceRoot": "src",
10 | "projectType": "application",
11 | "prefix": "app",
12 | "schematics": {},
13 | "architect": {
14 | "build": {
15 | "builder": "@angular-devkit/build-angular:browser",
16 | "options": {
17 | "outputPath": "www",
18 | "index": "src/index.html",
19 | "main": "src/main.ts",
20 | "polyfills": "src/polyfills.ts",
21 | "tsConfig": "tsconfig.app.json",
22 | "assets": [
23 | {
24 | "glob": "**/*",
25 | "input": "src/assets",
26 | "output": "assets"
27 | },
28 | {
29 | "glob": "**/*.svg",
30 | "input": "node_modules/ionicons/dist/ionicons/svg",
31 | "output": "./svg"
32 | }
33 | ],
34 | "styles": [
35 | {
36 | "input": "src/theme/variables.scss"
37 | },
38 | {
39 | "input": "src/global.scss"
40 | }
41 | ],
42 | "scripts": []
43 | },
44 | "configurations": {
45 | "production": {
46 | "fileReplacements": [
47 | {
48 | "replace": "src/environments/environment.ts",
49 | "with": "src/environments/environment.prod.ts"
50 | }
51 | ],
52 | "optimization": true,
53 | "outputHashing": "all",
54 | "sourceMap": false,
55 | "extractCss": true,
56 | "namedChunks": false,
57 | "aot": true,
58 | "extractLicenses": true,
59 | "vendorChunk": false,
60 | "buildOptimizer": true,
61 | "budgets": [
62 | {
63 | "type": "initial",
64 | "maximumWarning": "2mb",
65 | "maximumError": "5mb"
66 | }
67 | ]
68 | },
69 | "ci": {
70 | "progress": false
71 | }
72 | }
73 | },
74 | "serve": {
75 | "builder": "@angular-devkit/build-angular:dev-server",
76 | "options": {
77 | "browserTarget": "app:build"
78 | },
79 | "configurations": {
80 | "production": {
81 | "browserTarget": "app:build:production"
82 | },
83 | "ci": {
84 | "progress": false
85 | }
86 | }
87 | },
88 | "extract-i18n": {
89 | "builder": "@angular-devkit/build-angular:extract-i18n",
90 | "options": {
91 | "browserTarget": "app:build"
92 | }
93 | },
94 | "test": {
95 | "builder": "@angular-devkit/build-angular:karma",
96 | "options": {
97 | "main": "src/test.ts",
98 | "polyfills": "src/polyfills.ts",
99 | "tsConfig": "tsconfig.spec.json",
100 | "karmaConfig": "karma.conf.js",
101 | "styles": [],
102 | "scripts": [],
103 | "assets": [
104 | {
105 | "glob": "favicon.ico",
106 | "input": "src/",
107 | "output": "/"
108 | },
109 | {
110 | "glob": "**/*",
111 | "input": "src/assets",
112 | "output": "/assets"
113 | }
114 | ]
115 | },
116 | "configurations": {
117 | "ci": {
118 | "progress": false,
119 | "watch": false
120 | }
121 | }
122 | },
123 | "lint": {
124 | "builder": "@angular-devkit/build-angular:tslint",
125 | "options": {
126 | "tsConfig": [
127 | "tsconfig.app.json",
128 | "tsconfig.spec.json",
129 | "e2e/tsconfig.json"
130 | ],
131 | "exclude": ["**/node_modules/**"]
132 | }
133 | },
134 | "e2e": {
135 | "builder": "@angular-devkit/build-angular:protractor",
136 | "options": {
137 | "protractorConfig": "e2e/protractor.conf.js",
138 | "devServerTarget": "app:serve"
139 | },
140 | "configurations": {
141 | "production": {
142 | "devServerTarget": "app:serve:production"
143 | },
144 | "ci": {
145 | "devServerTarget": "app:serve:ci"
146 | }
147 | }
148 | },
149 | "ionic-cordova-build": {
150 | "builder": "@ionic/angular-toolkit:cordova-build",
151 | "options": {
152 | "browserTarget": "app:build"
153 | },
154 | "configurations": {
155 | "production": {
156 | "browserTarget": "app:build:production"
157 | }
158 | }
159 | },
160 | "ionic-cordova-serve": {
161 | "builder": "@ionic/angular-toolkit:cordova-serve",
162 | "options": {
163 | "cordovaBuildTarget": "app:ionic-cordova-build",
164 | "devServerTarget": "app:serve"
165 | },
166 | "configurations": {
167 | "production": {
168 | "cordovaBuildTarget": "app:ionic-cordova-build:production",
169 | "devServerTarget": "app:serve:production"
170 | }
171 | }
172 | }
173 | }
174 | }
175 | },
176 | "cli": {
177 | "defaultCollection": "@ionic/angular-toolkit"
178 | },
179 | "schematics": {
180 | "@ionic/angular-toolkit:component": {
181 | "styleext": "scss"
182 | },
183 | "@ionic/angular-toolkit:page": {
184 | "styleext": "scss"
185 | }
186 | }
187 | }
188 |
--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # You can see what browsers were selected by your queries by running:
6 | # npx browserslist
7 |
8 | > 0.5%
9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.
13 |
--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | MyApp
4 | An awesome Ionic/Cordova app.
5 | Ionic Framework Team
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('new App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should display welcome message', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toContain('The world is your oyster.');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.deepCss('app-root ion-content')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "baseUrl": "./",
6 | "module": "commonjs",
7 | "target": "es5"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "firebaseStorage4",
3 | "integrations": {
4 | "cordova": {}
5 | },
6 | "type": "angular"
7 | }
--------------------------------------------------------------------------------
/ionic.starter.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Blank Starter",
3 | "baseref": "master",
4 | "tarignore": [
5 | "node_modules",
6 | "package-lock.json",
7 | "www"
8 | ],
9 | "scripts": {
10 | "test": "npm run lint && npm run ng -- build --configuration=ci && npm run ng -- build --prod --progress=false && npm run ng -- test --configuration=ci && npm run ng -- e2e --configuration=ci && npm run ng -- g pg my-page --dry-run && npm run ng -- g c my-component --dry-run"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "baseline",
3 | "version": "0.0.1",
4 | "author": "Ionic Framework",
5 | "homepage": "https://ionicframework.com/",
6 | "scripts": {
7 | "ng": "ng",
8 | "start": "ng serve",
9 | "build": "ng build",
10 | "test": "ng test",
11 | "lint": "ng lint",
12 | "e2e": "ng e2e"
13 | },
14 | "private": true,
15 | "dependencies": {
16 | "@angular/common": "~8.1.2",
17 | "@angular/compiler": "~8.1.2",
18 | "@angular/core": "~8.1.2",
19 | "@angular/forms": "~8.1.2",
20 | "@angular/platform-browser": "~8.1.2",
21 | "@angular/platform-browser-dynamic": "~8.1.2",
22 | "@angular/router": "~8.1.2",
23 | "@ionic-native/camera": "^5.16.0",
24 | "@ionic-native/core": "^5.0.0",
25 | "@ionic-native/file": "^5.16.0",
26 | "@ionic-native/splash-screen": "^5.0.0",
27 | "@ionic-native/status-bar": "^5.0.0",
28 | "@ionic/angular": "^4.7.1",
29 | "cordova-android": "7.0.0",
30 | "cordova-ios": "^5.0.1",
31 | "cordova-plugin-camera": "^4.1.0",
32 | "cordova-plugin-file": "^6.0.2",
33 | "core-js": "^2.5.4",
34 | "firebase": "^7.2.2",
35 | "rxjs": "~6.5.1",
36 | "tslib": "^1.9.0",
37 | "zone.js": "~0.9.1"
38 | },
39 | "devDependencies": {
40 | "@angular-devkit/architect": "~0.801.2",
41 | "@angular-devkit/build-angular": "~0.801.2",
42 | "@angular-devkit/core": "~8.1.2",
43 | "@angular-devkit/schematics": "~8.1.2",
44 | "@angular/cli": "~8.1.2",
45 | "@angular/compiler": "~8.1.2",
46 | "@angular/compiler-cli": "~8.1.2",
47 | "@angular/language-service": "~8.1.2",
48 | "@ionic/angular-toolkit": "~2.0.0",
49 | "@types/jasmine": "~3.3.8",
50 | "@types/jasminewd2": "~2.0.3",
51 | "@types/node": "~8.9.4",
52 | "codelyzer": "^5.0.0",
53 | "cordova-plugin-device": "^2.0.2",
54 | "cordova-plugin-ionic-keyboard": "^2.2.0",
55 | "cordova-plugin-ionic-webview": "^4.1.3",
56 | "cordova-plugin-splashscreen": "^5.0.2",
57 | "cordova-plugin-statusbar": "^2.4.2",
58 | "cordova-plugin-telerik-imagepicker": "^2.3.3",
59 | "cordova-plugin-whitelist": "^1.3.3",
60 | "jasmine-core": "~3.4.0",
61 | "jasmine-spec-reporter": "~4.2.1",
62 | "karma": "~4.1.0",
63 | "karma-chrome-launcher": "~2.2.0",
64 | "karma-coverage-istanbul-reporter": "~2.0.1",
65 | "karma-jasmine": "~2.0.1",
66 | "karma-jasmine-html-reporter": "^1.4.0",
67 | "protractor": "~5.4.0",
68 | "ts-node": "~7.0.0",
69 | "tslint": "~5.15.0",
70 | "typescript": "~3.4.3"
71 | },
72 | "description": "An Ionic project",
73 | "cordova": {
74 | "plugins": {
75 | "cordova-plugin-camera": {},
76 | "cordova-plugin-file": {},
77 | "cordova-plugin-whitelist": {},
78 | "cordova-plugin-statusbar": {},
79 | "cordova-plugin-device": {},
80 | "cordova-plugin-splashscreen": {},
81 | "cordova-plugin-ionic-webview": {},
82 | "cordova-plugin-ionic-keyboard": {},
83 | "cordova-plugin-telerik-imagepicker": {
84 | "PHOTO_LIBRARY_USAGE_DESCRIPTION": "your usage message"
85 | }
86 | },
87 | "platforms": [
88 | "android",
89 | "ios"
90 | ]
91 | }
92 | }
--------------------------------------------------------------------------------
/resources/README.md:
--------------------------------------------------------------------------------
1 | These are Cordova resources. You can replace icon.png and splash.png and run
2 | `ionic cordova resources` to generate custom icons and splash screens for your
3 | app. See `ionic cordova resources --help` for details.
4 |
5 | Cordova reference documentation:
6 |
7 | - Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
8 | - Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
9 |
--------------------------------------------------------------------------------
/resources/android/icon/drawable-hdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/icon/drawable-hdpi-icon.png
--------------------------------------------------------------------------------
/resources/android/icon/drawable-ldpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/icon/drawable-ldpi-icon.png
--------------------------------------------------------------------------------
/resources/android/icon/drawable-mdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/icon/drawable-mdpi-icon.png
--------------------------------------------------------------------------------
/resources/android/icon/drawable-xhdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/icon/drawable-xhdpi-icon.png
--------------------------------------------------------------------------------
/resources/android/icon/drawable-xxhdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/icon/drawable-xxhdpi-icon.png
--------------------------------------------------------------------------------
/resources/android/icon/drawable-xxxhdpi-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/icon/drawable-xxxhdpi-icon.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-land-hdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-land-hdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-land-ldpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-land-ldpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-land-mdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-land-mdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-land-xhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-land-xhdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-land-xxhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-land-xxhdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-land-xxxhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-land-xxxhdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-hdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-port-hdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-ldpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-port-ldpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-mdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-port-mdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-xhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-port-xhdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-xxhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-port-xxhdpi-screen.png
--------------------------------------------------------------------------------
/resources/android/splash/drawable-port-xxxhdpi-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/android/splash/drawable-port-xxxhdpi-screen.png
--------------------------------------------------------------------------------
/resources/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/icon.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-1024.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-1024.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-40.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-40@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-40@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-40@3x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-50.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-50@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-50@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-60.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-60@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-60@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-60@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-60@3x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-72.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-72@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-72@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-76.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-76@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-76@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-83.5@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-83.5@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-small.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-small@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-small@2x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon-small@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon-small@3x.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon.png
--------------------------------------------------------------------------------
/resources/ios/icon/icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/icon/icon@2x.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-568h@2x~iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-568h@2x~iphone.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-667h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-667h.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-736h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-736h.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape-736h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Landscape-736h.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Landscape@2x~ipad.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape@~ipadpro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Landscape@~ipadpro.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Landscape~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Landscape~ipad.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Portrait@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Portrait@2x~ipad.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Portrait@~ipadpro.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Portrait@~ipadpro.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default-Portrait~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default-Portrait~ipad.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default@2x~iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default@2x~iphone.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default@2x~universal~anyany.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default@2x~universal~anyany.png
--------------------------------------------------------------------------------
/resources/ios/splash/Default~iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/ios/splash/Default~iphone.png
--------------------------------------------------------------------------------
/resources/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/resources/splash.png
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | const routes: Routes = [
5 | { path: '', redirectTo: 'home', pathMatch: 'full' },
6 | { path: 'home', loadChildren: './home/home.module#HomePageModule' },
7 | ];
8 |
9 | @NgModule({
10 | imports: [RouterModule.forRoot(routes)],
11 | exports: [RouterModule]
12 | })
13 | export class AppRoutingModule { }
14 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { TestBed, async } from '@angular/core/testing';
3 |
4 | import { Platform } from '@ionic/angular';
5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
7 |
8 | import { AppComponent } from './app.component';
9 |
10 | describe('AppComponent', () => {
11 |
12 | let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 |
14 | beforeEach(async(() => {
15 | statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 | splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 | platformReadySpy = Promise.resolve();
18 | platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 |
20 | TestBed.configureTestingModule({
21 | declarations: [AppComponent],
22 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 | providers: [
24 | { provide: StatusBar, useValue: statusBarSpy },
25 | { provide: SplashScreen, useValue: splashScreenSpy },
26 | { provide: Platform, useValue: platformSpy },
27 | ],
28 | }).compileComponents();
29 | }));
30 |
31 | it('should create the app', () => {
32 | const fixture = TestBed.createComponent(AppComponent);
33 | const app = fixture.debugElement.componentInstance;
34 | expect(app).toBeTruthy();
35 | });
36 |
37 | it('should initialize the app', async () => {
38 | TestBed.createComponent(AppComponent);
39 | expect(platformSpy.ready).toHaveBeenCalled();
40 | await platformReadySpy;
41 | expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 | expect(splashScreenSpy.hide).toHaveBeenCalled();
43 | });
44 |
45 | // TODO: add more tests!
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Platform } from '@ionic/angular';
4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
6 |
7 | @Component({
8 | selector: 'app-root',
9 | templateUrl: 'app.component.html'
10 | })
11 | export class AppComponent {
12 | constructor(
13 | private platform: Platform,
14 | private splashScreen: SplashScreen,
15 | private statusBar: StatusBar
16 | ) {
17 | this.initializeApp();
18 | }
19 |
20 | initializeApp() {
21 | this.platform.ready().then(() => {
22 | this.statusBar.styleDefault();
23 | this.splashScreen.hide();
24 | });
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { BrowserModule } from "@angular/platform-browser";
3 | import { RouterModule, RouteReuseStrategy, Routes } from "@angular/router";
4 |
5 | import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
6 | import { SplashScreen } from "@ionic-native/splash-screen/ngx";
7 | import { StatusBar } from "@ionic-native/status-bar/ngx";
8 |
9 | import { AppComponent } from "./app.component";
10 | import { AppRoutingModule } from "./app-routing.module";
11 |
12 | import { Camera } from '@ionic-native/camera/ngx';
13 | import { File } from '@ionic-native/file/ngx';
14 |
15 | @NgModule({
16 | declarations: [AppComponent],
17 | entryComponents: [],
18 | imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
19 | providers: [
20 | File,
21 | Camera,
22 | StatusBar,
23 | SplashScreen,
24 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
25 | ],
26 | bootstrap: [AppComponent]
27 | })
28 | export class AppModule {}
29 |
--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { HomePage } from './home.page';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | FormsModule,
13 | IonicModule,
14 | RouterModule.forChild([
15 | {
16 | path: '',
17 | component: HomePage
18 | }
19 | ])
20 | ],
21 | declarations: [HomePage]
22 | })
23 | export class HomePageModule {}
24 |
--------------------------------------------------------------------------------
/src/app/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Ionic Blank
5 |
6 |
7 |
8 |
9 |
10 | This only works on device or simulator
11 | Pick Image
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 | import { Camera, CameraOptions } from "@ionic-native/camera/ngx";
3 | import { File } from "@ionic-native/file/ngx";
4 |
5 | // FIREBASE
6 | import * as firebase from "firebase";
7 |
8 | @Component({
9 | selector: "app-home",
10 | templateUrl: "home.page.html",
11 | styleUrls: ["home.page.scss"]
12 | })
13 | export class HomePage implements OnInit {
14 | result;
15 |
16 | constructor(private camera: Camera, private file: File) {}
17 |
18 | ngOnInit(): void {
19 | //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
20 | //Add 'implements OnInit' to the class.
21 | firebase.initializeApp({});
22 | }
23 |
24 | async pickImage() {
25 | try {
26 | const options: CameraOptions = {
27 | quality: 80,
28 | destinationType: this.camera.DestinationType.FILE_URI,
29 | encodingType: this.camera.EncodingType.JPEG,
30 | mediaType: this.camera.MediaType.ALLMEDIA,
31 | sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
32 | };
33 |
34 | let cameraInfo = await this.camera.getPicture(options);
35 | let blobInfo = await this.makeFileIntoBlob(cameraInfo);
36 | let uploadInfo: any = await this.uploadToFirebase(blobInfo);
37 |
38 | alert("File Upload Success " + uploadInfo.fileName);
39 | } catch (e) {
40 | console.log(e.message);
41 | alert("File Upload Error " + e.message);
42 | }
43 | }
44 |
45 | // FILE STUFF
46 | makeFileIntoBlob(_imagePath) {
47 | // INSTALL PLUGIN - cordova plugin add cordova-plugin-file
48 | return new Promise((resolve, reject) => {
49 | let fileName = "";
50 | this.file
51 | .resolveLocalFilesystemUrl(_imagePath)
52 | .then(fileEntry => {
53 | let { name, nativeURL } = fileEntry;
54 |
55 | // get the path..
56 | let path = nativeURL.substring(0, nativeURL.lastIndexOf("/"));
57 | console.log("path", path);
58 | console.log("fileName", name);
59 |
60 | fileName = name;
61 |
62 | // we are provided the name, so now read the file into
63 | // a buffer
64 | return this.file.readAsArrayBuffer(path, name);
65 | })
66 | .then(buffer => {
67 | // get the buffer and make a blob to be saved
68 | let imgBlob = new Blob([buffer], {
69 | type: "image/jpeg"
70 | });
71 | console.log(imgBlob.type, imgBlob.size);
72 | resolve({
73 | fileName,
74 | imgBlob
75 | });
76 | })
77 | .catch(e => reject(e));
78 | });
79 | }
80 |
81 | /**
82 | *
83 | * @param _imageBlobInfo
84 | */
85 | uploadToFirebase(_imageBlobInfo) {
86 | console.log("uploadToFirebase");
87 | return new Promise((resolve, reject) => {
88 | let fileRef = firebase.storage().ref("images/" + _imageBlobInfo.fileName);
89 |
90 | let uploadTask = fileRef.put(_imageBlobInfo.imgBlob);
91 |
92 | uploadTask.on(
93 | "state_changed",
94 | (_snapshot: any) => {
95 | console.log(
96 | "snapshot progess " +
97 | (_snapshot.bytesTransferred / _snapshot.totalBytes) * 100
98 | );
99 | },
100 | _error => {
101 | console.log(_error);
102 | reject(_error);
103 | },
104 | () => {
105 | // completion...
106 | resolve(uploadTask.snapshot);
107 | }
108 | );
109 | });
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-firebase-storage/4af28c3483747410a71963d5318c62d289c964ff/src/assets/icon/favicon.png
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * In development mode, to ignore zone related error stack frames such as
11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 | * import the following file, but please comment it out in production mode
13 | * because it will have performance impact when throw error
14 | */
15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16 |
--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * App Global CSS
3 | * ----------------------------------------------------------------------------
4 | * Put style rules here that you want to apply globally. These styles are for
5 | * the entire app and not just one component. Additionally, this file can be
6 | * used as an entry point to import other CSS/Sass files to be included in the
7 | * output CSS.
8 | * For more information on global stylesheets, visit the documentation:
9 | * https://ionicframework.com/docs/layout/global-stylesheets
10 | */
11 |
12 | /* Core CSS required for Ionic components to work properly */
13 | @import "~@ionic/angular/css/core.css";
14 |
15 | /* Basic CSS for apps built with Ionic */
16 | @import "~@ionic/angular/css/normalize.css";
17 | @import "~@ionic/angular/css/structure.css";
18 | @import "~@ionic/angular/css/typography.css";
19 | @import '~@ionic/angular/css/display.css';
20 |
21 | /* Optional CSS utils that can be commented out */
22 | @import "~@ionic/angular/css/padding.css";
23 | @import "~@ionic/angular/css/float-elements.css";
24 | @import "~@ionic/angular/css/text-alignment.css";
25 | @import "~@ionic/angular/css/text-transformation.css";
26 | @import "~@ionic/angular/css/flex-utils.css";
27 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Ionic App
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, 'coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags.ts';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | import './zone-flags.ts';
56 |
57 | /***************************************************************************************************
58 | * Zone JS is required by default for Angular itself.
59 | */
60 |
61 | import 'zone.js/dist/zone'; // Included with Angular CLI.
62 |
63 |
64 | /***************************************************************************************************
65 | * APPLICATION IMPORTS
66 | */
67 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/theming/
3 |
4 | /** Ionic CSS Variables **/
5 | :root {
6 | /** primary **/
7 | --ion-color-primary: #488aff;
8 | --ion-color-primary-rgb: 72,138,255;
9 | --ion-color-primary-contrast: #fff;
10 | --ion-color-primary-contrast-rgb: 255,255,255;
11 | --ion-color-primary-shade: #3f79e0;
12 | --ion-color-primary-tint: #5a96ff;
13 |
14 | /** secondary **/
15 | --ion-color-secondary: #32db64;
16 | --ion-color-secondary-rgb: 50,219,100;
17 | --ion-color-secondary-contrast: #fff;
18 | --ion-color-secondary-contrast-rgb: 255,255,255;
19 | --ion-color-secondary-shade: #2cc158;
20 | --ion-color-secondary-tint: #47df74;
21 |
22 | /** tertiary **/
23 | --ion-color-tertiary: #f4a942;
24 | --ion-color-tertiary-rgb: 244,169,66;
25 | --ion-color-tertiary-contrast: #fff;
26 | --ion-color-tertiary-contrast-rgb: 255,255,255;
27 | --ion-color-tertiary-shade: #d7953a;
28 | --ion-color-tertiary-tint: #f5b255;
29 |
30 | /** success **/
31 | --ion-color-success: #10dc60;
32 | --ion-color-success-rgb: 16,220,96;
33 | --ion-color-success-contrast: #fff;
34 | --ion-color-success-contrast-rgb: 255,255,255;
35 | --ion-color-success-shade: #0ec254;
36 | --ion-color-success-tint: #28e070;
37 |
38 | /** warning **/
39 | --ion-color-warning: #ffce00;
40 | --ion-color-warning-rgb: 255,206,0;
41 | --ion-color-warning-contrast: #000;
42 | --ion-color-warning-contrast-rgb: 0,0,0;
43 | --ion-color-warning-shade: #e0b500;
44 | --ion-color-warning-tint: #ffd31a;
45 |
46 | /** danger **/
47 | --ion-color-danger: #f53d3d;
48 | --ion-color-danger-rgb: 245,61,61;
49 | --ion-color-danger-contrast: #fff;
50 | --ion-color-danger-contrast-rgb: 255,255,255;
51 | --ion-color-danger-shade: #d83636;
52 | --ion-color-danger-tint: #f65050;
53 |
54 | /** light **/
55 | --ion-color-light: #f4f4f4;
56 | --ion-color-light-rgb: 244,244,244;
57 | --ion-color-light-contrast: #000;
58 | --ion-color-light-contrast-rgb: 0,0,0;
59 | --ion-color-light-shade: #d7d7d7;
60 | --ion-color-light-tint: #f5f5f5;
61 |
62 | /** medium **/
63 | --ion-color-medium: #989aa2;
64 | --ion-color-medium-rgb: 152,154,162;
65 | --ion-color-medium-contrast: #000;
66 | --ion-color-medium-contrast-rgb: 0,0,0;
67 | --ion-color-medium-shade: #86888f;
68 | --ion-color-medium-tint: #a2a4ab;
69 |
70 | /** dark **/
71 | --ion-color-dark: #222;
72 | --ion-color-dark-rgb: 34,34,34;
73 | --ion-color-dark-contrast: #fff;
74 | --ion-color-dark-contrast-rgb: 255,255,255;
75 | --ion-color-dark-shade: #1e1e1e;
76 | --ion-color-dark-tint: #383838;
77 | }
--------------------------------------------------------------------------------
/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Prevents Angular change detection from
3 | * running with certain Web Component callbacks
4 | */
5 | (window as any).__Zone_disable_customElements = true;
6 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/app",
5 | "types": []
6 | },
7 | "include": [
8 | "src/**/*.ts"
9 | ],
10 | "exclude": [
11 | "src/test.ts",
12 | "src/**/*.spec.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "module": "esnext",
9 | "moduleResolution": "node",
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "importHelpers": true,
13 | "target": "es2015",
14 | "typeRoots": [
15 | "node_modules/@types"
16 | ],
17 | "lib": [
18 | "es2018",
19 | "dom"
20 | ]
21 | },
22 | "angularCompilerOptions": {
23 | "fullTemplateTypeCheck": true,
24 | "strictInjectionParameters": true
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/zone-flags.ts",
13 | "src/polyfills.ts"
14 | ],
15 | "include": [
16 | "src/**/*.spec.ts",
17 | "src/**/*.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "array-type": false,
8 | "arrow-parens": false,
9 | "deprecation": {
10 | "severity": "warn"
11 | },
12 | "import-blacklist": [
13 | true,
14 | "rxjs/Rx"
15 | ],
16 | "interface-name": false,
17 | "max-classes-per-file": false,
18 | "max-line-length": [
19 | true,
20 | 140
21 | ],
22 | "member-access": false,
23 | "member-ordering": [
24 | true,
25 | {
26 | "order": [
27 | "static-field",
28 | "instance-field",
29 | "static-method",
30 | "instance-method"
31 | ]
32 | }
33 | ],
34 | "no-consecutive-blank-lines": false,
35 | "no-console": [
36 | true,
37 | "debug",
38 | "info",
39 | "time",
40 | "timeEnd",
41 | "trace"
42 | ],
43 | "no-empty": false,
44 | "no-inferrable-types": [
45 | true,
46 | "ignore-params"
47 | ],
48 | "no-non-null-assertion": true,
49 | "no-redundant-jsdoc": true,
50 | "no-switch-case-fall-through": true,
51 | "no-use-before-declare": true,
52 | "no-var-requires": false,
53 | "object-literal-key-quotes": [
54 | true,
55 | "as-needed"
56 | ],
57 | "object-literal-sort-keys": false,
58 | "ordered-imports": false,
59 | "quotemark": [
60 | true,
61 | "single"
62 | ],
63 | "trailing-comma": false,
64 | "no-output-on-prefix": true,
65 | "no-inputs-metadata-property": true,
66 | "no-host-metadata-property": true,
67 | "no-input-rename": true,
68 | "no-output-rename": true,
69 | "use-lifecycle-interface": true,
70 | "use-pipe-transform-interface": true,
71 | "one-variable-per-declaration": false,
72 | "component-class-suffix": [true, "Page", "Component"],
73 | "directive-class-suffix": true,
74 | "directive-selector": [
75 | true,
76 | "attribute",
77 | "app",
78 | "camelCase"
79 | ],
80 | "component-selector": [
81 | true,
82 | "element",
83 | "app",
84 | "page",
85 | "kebab-case"
86 | ]
87 | }
88 | }
89 |
--------------------------------------------------------------------------------