Working on image picker. Not complete.

config.xml

@@ -0,0 +1,85 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+    <name>MyApp</name>
+    <description>An awesome Ionic/Cordova app.</description>
+    <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
+    <content src="index.html" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <preference name="ScrollEnabled" value="false" />
+    <preference name="android-minSdkVersion" value="19" />
+    <preference name="BackupWebStorage" value="none" />
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="FadeSplashScreenDuration" value="300" />
+    <preference name="SplashShowOnlyFirstTime" value="false" />
+    <preference name="SplashScreen" value="screen" />
+    <preference name="SplashScreenDelay" value="3000" />
+    <platform name="android">
+        <allow-intent href="market:*" />
+        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
+        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
+        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
+        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
+        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
+        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
+        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
+        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
+        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
+        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
+        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
+        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
+        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
+        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
+        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
+        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
+        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
+        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
+        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
+        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
+        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
+        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
+        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
+        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
+        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
+        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
+        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
+        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
+        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
+        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
+        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
+        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
+        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
+        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
+        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
+        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
+        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
+        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
+        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
+        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
+        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
+        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
+        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
+        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
+        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
+        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
+        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
+        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
+        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
+    </platform>
+    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
+    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
+    <plugin name="cordova-plugin-device" spec="2.0.2" />
+    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
+    <plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
+    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
+</widget>

ionic.config.json

@@ -1,6 +1,8 @@
 {
   "name": "TrophiesTracker",
-  "integrations": {},
+  "integrations": {
+    "cordova": {}
+  },
   "type": "angular",
   "id": "cb7f5515"
 }

package.json

@@ -20,12 +20,20 @@
     "@angular/platform-browser": "^7.2.2",
     "@angular/platform-browser-dynamic": "^7.2.2",
     "@angular/router": "^7.2.2",
+    "@ionic-native/camera": "^5.4.0",
     "@ionic-native/core": "^5.0.0",
+    "@ionic-native/file": "^5.4.0",
+    "@ionic-native/file-path": "^5.4.0",
+    "@ionic-native/ionic-webview": "^5.4.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.1.0",
     "@ionic/pro": "2.0.4",
     "@ionic/storage": "^2.2.0",
+    "@types/cordova": "0.0.34",
+    "ajv": "^6.9.1",
+    "cordova-android": "^8.0.0",
+    "cordova-plugin-ionic": "^5.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "zone.js": "~0.8.29"
@@ -56,5 +64,12 @@
     "tslint": "~5.12.0",
     "typescript": "~3.1.6"
   },
-  "description": "An Ionic project"
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-camera": {},
+      "cordova-plugin-file": {},
+      "cordova-plugin-ionic-webview": {}
+    }
+  }
 }

resources/README.md

@@ -0,0 +1,8 @@
+These are Cordova resources. You can replace icon.png and splash.png and run
+`ionic cordova resources` to generate custom icons and splash screens for your
+app. See `ionic cordova resources --help` for details.
+
+Cordova reference documentation:
+
+- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
+- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

src/app/signup/signup.module.ts

@@ -8,6 +8,15 @@ import { IonicModule } from '@ionic/angular';
 import { SignupPage } from './signup.page';
 import { ReactiveFormsModule } from '@angular/forms';
 
+import { HttpClientModule } from '@angular/common/http';
+
+import { Camera } from '@ionic-native/camera/ngx';
+import { File } from '@ionic-native/file/ngx';
+import { WebView } from '@ionic-native/ionic-webview/ngx';
+import { FilePath } from '@ionic-native/file-path/ngx';
+
+import { IonicStorageModule } from '@ionic/storage';
+
 const routes: Routes = [
   {
     path: '',
@@ -21,8 +30,16 @@ const routes: Routes = [
     FormsModule,
     IonicModule,
 	ReactiveFormsModule,
-    RouterModule.forChild(routes)
+    RouterModule.forChild(routes),
+	HttpClientModule,
+    IonicStorageModule.forRoot()
   ],
-  declarations: [SignupPage]
+  declarations: [SignupPage],
+  providers: [
+    Camera,
+    File,
+    WebView,
+    FilePath
+  ]
 })
 export class SignupPageModule {}

src/app/signup/signup.page.html

@@ -22,8 +22,8 @@
 				formControlName="username" type="text"></ion-input>
 			</ion-item>
 			<ion-item *ngIf="!signupForm.controls.username.valid  && (signupForm.controls.username.dirty || submitAttempt)">
-          <p style="color: #ea6153;">Username is invalid</p>
-      </ion-item>
+				<p style="color: #ea6153;">Username is invalid</p>
+			</ion-item>
 
 			<ion-item>
 				<ion-label position="floating">Password:</ion-label>
@@ -44,5 +44,29 @@
 
 		<ion-button expand="block" (click)="signUp()">Sign up</ion-button>
 
+		<ion-list>
+			<ion-item *ngFor="let img of images; index as pos" text-wrap>
+			  <ion-thumbnail slot="start">
+				<ion-img [src]="img.path"></ion-img>
+			  </ion-thumbnail>
+			  <ion-label>
+				{{ img.name }}
+			  </ion-label>
+			  <ion-button slot="end" fill="clear" (click)="startUpload(img)">
+				<ion-icon slot="icon-only" name="cloud-upload"></ion-icon>
+			  </ion-button>
+			  <ion-button slot="end" fill="clear" (click)="deleteImage(img, pos)">
+				<ion-icon slot="icon-only" name="trash"></ion-icon>
+			  </ion-button>
+			</ion-item>
+		 </ion-list>
+
 	</ion-list>
 </ion-content>
+<ion-footer>
+  <ion-toolbar color="primary">
+    <ion-button fill="clear" expand="full" color="light" (click)="selectImage()">
+      <ion-icon slot="start" name="camera"></ion-icon>
+      Select Image</ion-button>
+  </ion-toolbar>
+</ion-footer>

src/app/signup/signup.page.ts

@@ -1,10 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import { TrophyServiceService } from '../services/trophy-service.service';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
 
 import { UsernameValidator } from  '../validators/username';
 
+import { Camera, CameraOptions, PictureSourceType } from '@ionic-native/camera/ngx';
+import { ActionSheetController, ToastController, Platform, LoadingController } from '@ionic/angular';
+import { File, FileEntry } from '@ionic-native/file/ngx';
+import { HttpClient } from '@angular/common/http';
+import { WebView } from '@ionic-native/ionic-webview/ngx';
+import { Storage } from '@ionic/storage';
+import { FilePath } from '@ionic-native/file-path/ngx';
+
+import { finalize } from 'rxjs/operators';
+
+const STORAGE_KEY = 'my_images';
+
 @Component({
 	 selector: 'app-signup',
 	 templateUrl: './signup.page.html',
@@ -16,7 +28,18 @@ export class SignupPage implements OnInit {
 	public signupForm: FormGroup;
 	public submitAttempt: boolean = false;
 
-	constructor(private trophyService: TrophyServiceService, public formBuilder: FormBuilder)
+	images = [];
+
+	constructor(private trophyService: TrophyServiceService, public formBuilder: FormBuilder,
+	private webview: WebView, 
+	private toastController: ToastController, 
+	private filePath: FilePath, 
+	private storage: Storage, 
+	private camera: Camera, 
+	private file: File, 
+	private actionSheetController: ActionSheetController,
+	private platform: Platform,
+	private ref: ChangeDetectorRef)
 	{ 
 		this.signupForm = formBuilder.group({
 	        email: ['', Validators.compose([Validators.required])],
@@ -32,6 +55,102 @@ export class SignupPage implements OnInit {
 
 	}
 
+	async selectImage() {
+		const actionSheet = await this.actionSheetController.create({
+			header: "Select Image source",
+			buttons: [{
+					text: 'Load from Library',
+					handler: () => {
+						this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
+					}
+				},
+				{
+					text: 'Cancel',
+					role: 'cancel'
+				}
+			]
+		});
+		await actionSheet.present();
+	}
+
+	takePicture(sourceType: PictureSourceType) {
+		var options: CameraOptions = {
+			quality: 100,
+			sourceType: sourceType,
+			saveToPhotoAlbum: false,
+			correctOrientation: true
+		};
+
+		this.camera.getPicture(options).then(imagePath => {
+			if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
+				this.filePath.resolveNativePath(imagePath)
+					.then(filePath => {
+						let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
+						let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
+						this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
+					});
+			}
+		});
+	}
+
+	createFileName() {
+		var d = new Date(),
+			n = d.getTime(),
+			newFileName = n + ".jpg";
+		return newFileName;
+	}
+
+	copyFileToLocalDir(namePath, currentName, newFileName) {
+		this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
+			this.updateStoredImages(newFileName);
+		}, error => {
+			this.presentToast('Error while storing file.');
+		});
+	}
+
+	updateStoredImages(name) {
+		this.storage.get(STORAGE_KEY).then(images => {
+			let arr = JSON.parse(images);
+			if (!arr) {
+				let newImages = [name];
+				this.storage.set(STORAGE_KEY, JSON.stringify(newImages));
+			} else {
+				arr.push(name);
+				this.storage.set(STORAGE_KEY, JSON.stringify(arr));
+			}
+
+			let filePath = this.file.dataDirectory + name;
+			let resPath = this.pathForImage(filePath);
+
+			let newEntry = {
+				name: name,
+				path: resPath,
+				filePath: filePath
+			};
+
+			this.images = [newEntry, ...this.images];
+			this.ref.detectChanges(); // trigger change detection cycle
+		});
+	}
+
+	pathForImage(img) {
+		if (img === null) {
+			return '';
+		} else {
+			let converted = this.webview.convertFileSrc(img);
+			return converted;
+		}
+	}
+
+	async presentToast(text) {
+		const toast = await this.toastController.create({
+		message: text,
+		position: 'bottom',
+		duration: 3000
+		});
+		toast.present();
+	}
+
 	signUp()
 	{
 		console.log(this.signupForm.controls.username);