added image upload feature - front end only

MyPassionProject/src/main/java/com/example/demo/Controller/UserController.java

@@ -26,7 +26,7 @@ public class UserController {
     return userService.getUserById(userId);
   }
 
-  @PutMapping(value = "/users/{userId}")
+  @PatchMapping(value = "/users/{userId}")
   public ResponseEntity<User> updateSummary(@RequestBody User user, @PathVariable Long userId){
     return userService.updateUserProfile(user, userId);
   }

MyPassionProject/src/main/java/com/example/demo/Entity/User.java

@@ -4,6 +4,11 @@ import lombok.Getter;
 import lombok.Setter;
 
 import javax.persistence.*;
+import javax.validation.constraints.NotBlank;
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.FileNotFoundException;
+import java.io.IOException;
 import java.util.HashSet;
 import java.util.Set;
 
@@ -29,6 +34,9 @@ public class User {
             inverseJoinColumns = {@JoinColumn(name = "game_id")})
     private Set<Game> gameLibrary;
 
+//    @Lob
+//    private byte[] profilePic;
+
     public void addGames(Game game){
         if(gameLibrary==null){
             this.gameLibrary = new HashSet<Game>();
@@ -51,4 +59,16 @@ public class User {
     public String getProfileName() {
         return profileName;
     }
+
+//    public void setProfilePic(File input){
+//        byte[] picInBytes = new byte[(int)input.length()];
+//        try {
+//            FileInputStream fileInputStream = new FileInputStream(input);
+//            fileInputStream.read(picInBytes);
+//            fileInputStream.close();
+//        } catch (IOException e) {
+//            e.printStackTrace();
+//        }
+//        profilePic=picInBytes;
+//    }
 }

MyPassionProjectClient/config.xml

@@ -81,4 +81,5 @@
     <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
     <plugin name="cordova-plugin-ionic-webview" spec="1.1.19" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
+    <plugin name="cordova-plugin-file" spec="^6.0.1" />
 </widget>

MyPassionProjectClient/package-lock.json

@@ -99,11 +99,26 @@
         "tslib": "^1.7.1"
       }
     },
+    "@ionic-native/camera": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/camera/-/camera-4.10.0.tgz",
+      "integrity": "sha512-mH/E1LnNCphnX9dAForzSX85mzkyTQ6mUce1TM1sGHeo0rA6vCvYsJw5cPnbDmm67rDlZhgbFsF5H6bGe/fCnQ=="
+    },
     "@ionic-native/core": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-4.9.2.tgz",
       "integrity": "sha512-dWV08EjK82KCDU9CM4UVEZ5yrNj9Uz7GoL818MHeJfDS4uBZT+U7qqcHEklc3+R+lMLBuTnoWe+TX3O5SwmW9A=="
     },
+    "@ionic-native/file": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/file/-/file-4.10.0.tgz",
+      "integrity": "sha512-W3Yap6vd/f3bYG2zNG+6vjRymUuT8DrVOW/uyOJt4YfG8CdTauj0nsg501+BKXIvFu8nv1yD3t4qTyOKintKIQ=="
+    },
+    "@ionic-native/file-path": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/file-path/-/file-path-4.10.0.tgz",
+      "integrity": "sha512-ipGzLk3uPifxH53yLQIKavuICr2TSwcqWf1YXHUbTRQFZPX5FJxAhs137wtcx3sEYsKnysvFieTNnlIB/S6Ugg=="
+    },
     "@ionic-native/splash-screen": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-4.9.2.tgz",
@@ -114,6 +129,11 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/status-bar/-/status-bar-4.9.2.tgz",
       "integrity": "sha512-k3ZJDAdCwBhubjw29gsRlNhEcA06JIxm5xeSpSWzhrvY+3+eHUgTwNMYGkkVurmMYFcuWPEOCpNZ2oelMqYA0Q=="
     },
+    "@ionic-native/transfer": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/transfer/-/transfer-3.14.0.tgz",
+      "integrity": "sha1-Q/t7kScvJFEzBjsKGllHknsJsho="
+    },
     "@ionic/app-scripts": {
       "version": "3.1.11",
       "resolved": "https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-3.1.11.tgz",
@@ -1104,6 +1124,11 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "cordova-plugin-file": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.1.tgz",
+      "integrity": "sha1-SWBrjBWlaI1HKPkuSnMloGHeB/U="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",

MyPassionProjectClient/package.json

@@ -20,10 +20,15 @@
     "@angular/http": "5.2.11",
     "@angular/platform-browser": "5.2.11",
     "@angular/platform-browser-dynamic": "5.2.11",
+    "@ionic-native/camera": "^4.10.0",
     "@ionic-native/core": "~4.9.2",
+    "@ionic-native/file": "^4.10.0",
+    "@ionic-native/file-path": "^4.10.0",
     "@ionic-native/splash-screen": "~4.9.2",
     "@ionic-native/status-bar": "~4.9.2",
+    "@ionic-native/transfer": "^3.14.0",
     "@ionic/storage": "2.1.3",
+    "cordova-plugin-file": "^6.0.1",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
     "rxjs": "5.5.11",
@@ -34,5 +39,10 @@
     "@ionic/app-scripts": "3.1.11",
     "typescript": "~2.6.2"
   },
-  "description": "An Ionic project"
+  "description": "An Ionic project",
+  "cordova": {
+    "plugins": {
+      "cordova-plugin-file": {}
+    }
+  }
 }

MyPassionProjectClient/src/app/app.module.ts

@@ -8,12 +8,18 @@ import {MenuPageModule} from "../pages/menu/menu.module";
 import { HttpClientModule } from '../../node_modules/@angular/common/http';
 import { UsersService } from '../providers/users-service';
 import { ProfileModalPage } from '../pages/settings/profile-modal';
+import { PictureModalPage } from '../pages/settings/picture-modal';
+import { Transfer } from '../../node_modules/@ionic-native/transfer';
+import { Camera } from '../../node_modules/@ionic-native/camera';
+import { FilePath } from '../../node_modules/@ionic-native/file-path';
+import {File} from '../../node_modules/@ionic-native/file';
 
 
 @NgModule({
   declarations: [
     MyApp,
-    ProfileModalPage
+    ProfileModalPage,
+    PictureModalPage
   ],
   imports: [
     BrowserModule,
@@ -25,11 +31,16 @@ import { ProfileModalPage } from '../pages/settings/profile-modal';
   entryComponents: [
     MyApp,
     ProfileModalPage,
+    PictureModalPage
    ],
   providers: [
     StatusBar,
     SplashScreen,
     UsersService,
+    File,
+    Transfer,
+    Camera,
+    FilePath,
     {provide: ErrorHandler, useClass: IonicErrorHandler}
   ]
 })

MyPassionProjectClient/src/pages/profile/profile.html

@@ -18,7 +18,6 @@
     <ion-card-header>
       <strong>My Profile</strong>
     </ion-card-header>
-
     <img src="/assets/imgs/avatar.png"/>
 
     <ion-card-content>

MyPassionProjectClient/src/pages/settings/picture-modal.html

@@ -0,0 +1,29 @@
+<ion-header>
+    <ion-navbar>
+        <ion-title>Upload Picture</ion-title>
+        <ion-buttons end>
+                <button ion-button (click)="dismiss()">
+                  <span ion-text showWhen="ios,core">Cancel</span>
+                  <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
+                </button>
+              </ion-buttons>
+    </ion-navbar>
+</ion-header>
+       
+      <ion-content padding>
+        <img src="{{pathForImage(lastImage)}}" style="width: 100%" [hidden]="lastImage === null">
+        <h3 [hidden]="lastImage !== null">Please Select Image!</h3>
+      </ion-content>
+       
+      <ion-footer>
+        <ion-toolbar>
+          <ion-buttons>
+            <button ion-button icon-left (click)="presentActionSheet()">
+              <ion-icon name="camera"></ion-icon>Select Image
+            </button>
+            <button ion-button icon-left (click)="uploadImage()" [disabled]="lastImage === null">
+              <ion-icon name="cloud-upload"></ion-icon>Upload
+            </button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-footer>

MyPassionProjectClient/src/pages/settings/picture-modal.ts

@@ -0,0 +1,150 @@
+import { Component } from "../../../node_modules/@angular/core";
+import { NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading, ViewController } from 'ionic-angular';
+import { File } from '@ionic-native/file';
+import { Camera } from '@ionic-native/camera';
+import { Transfer, TransferObject } from '@ionic-native/transfer';
+import { FilePath } from '@ionic-native/file-path';
+
+declare var cordova: any;
+
+@Component({
+    selector: 'page-picture-modal',
+    templateUrl: './picture-modal.html'
+})
+
+export class PictureModalPage{
+    lastImage: string = null;
+    loading: Loading;
+    
+    constructor(public viewCtrl: ViewController, public navCtrl: NavController, private camera: Camera, private transfer: Transfer, private file: File, private filePath: FilePath, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController){
+    }
+
+    public presentActionSheet() {
+        let actionSheet = this.actionSheetCtrl.create({
+          title: 'Select Image Source',
+          buttons: [
+            {
+              text: 'Load from Library',
+              handler: () => {
+                this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
+              }
+            },
+            {
+              text: 'Use Camera',
+              handler: () => {
+                this.takePicture(this.camera.PictureSourceType.CAMERA);
+              }
+            },
+            {
+              text: 'Cancel',
+              role: 'cancel'
+            }
+          ]
+        });
+        actionSheet.present();
+      }
+
+      public takePicture(sourceType) {
+        // Create options for the Camera Dialog
+        var options = {
+          quality: 100,
+          sourceType: sourceType,
+          saveToPhotoAlbum: false,
+          correctOrientation: true
+        };
+       
+        // Get the data of an image
+        this.camera.getPicture(options).then((imagePath) => {
+          // Special handling for Android library
+          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());
+              });
+          } else {
+            var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
+            var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
+            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
+          }
+        }, (err) => {
+          this.presentToast('Error while selecting image.');
+        });
+      }
+
+      // Create a new name for the image
+    private createFileName() {
+        var d = new Date(),
+        n = d.getTime(),
+        newFileName =  n + ".jpg";
+        return newFileName;
+    }
+
+        // Copy the image to a local folder
+    private copyFileToLocalDir(namePath, currentName, newFileName) {
+        this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
+            this.lastImage = newFileName;
+        }, error => {
+            this.presentToast('Error while storing file.');
+        });
+    }
+
+    private presentToast(text) {
+        let toast = this.toastCtrl.create({
+            message: text,
+            duration: 3000,
+            position: 'top'
+        });
+        toast.present();
+    }
+
+        // Always get the accurate path to your apps folder
+    public pathForImage(img) {
+        if (img === null) {
+            return '';
+        } else {
+            return cordova.file.dataDirectory + img;
+        }
+    }
+
+    public uploadImage() {
+        // Destination URL
+        var url = "http://localhost:8080/upload";
+       
+        // File for Upload
+        var targetPath = this.pathForImage(this.lastImage);
+       
+        // File name only
+        var filename = this.lastImage;
+       
+        var options = {
+          fileKey: "file",
+          fileName: filename,
+          chunkedMode: false,
+          mimeType: "multipart/form-data",
+          params : {'fileName': filename}
+        };
+       
+        const fileTransfer: TransferObject = this.transfer.create();
+       
+        this.loading = this.loadingCtrl.create({
+          content: 'Uploading...',
+        });
+        this.loading.present();
+       
+        // Use the FileTransfer to upload the image
+        fileTransfer.upload(targetPath, url, options).then(data => {
+          this.loading.dismissAll()
+          this.presentToast('Image succesful uploaded.');
+        }, err => {
+          this.loading.dismissAll()
+          this.presentToast('Error while uploading file.');
+        });
+      }
+
+      dismiss() {
+        this.viewCtrl.dismiss();
+      }
+}
+

MyPassionProjectClient/src/pages/settings/profile-modal.html

@@ -1,30 +1,28 @@
 <ion-header>
-
-        <ion-navbar>
-          <ion-title>Update Profile</ion-title>
-          <ion-buttons end>
-                <button ion-button (click)="dismiss()">
-                    <span ion-text showWhen="ios,core">Cancel</span>
-                    <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
-                </button>
-            </ion-buttons>
-        </ion-navbar>
-      
-      </ion-header>   
-      <ion-content padding>
-        <form (submit)=updateProfile()>
-          <ion-list>
-            <ion-item>
-              <ion-label stacked>Profile Name</ion-label>
-              <ion-input type="text" [(ngModel)]="user.profileName" name="profilename"></ion-input>
-            </ion-item>
-            <ion-item>
-                <ion-label stacked>Summary</ion-label>
-                <ion-textarea type="text" [(ngModel)]="user.summary" name="summary"></ion-textarea>
-            </ion-item>
-            <div padding>
-                <button ion-button color="primary" block clear>Update</button>
-            </div>
-          </ion-list>
-        </form>
-      </ion-content>
+  <ion-navbar>
+      <ion-title>Update Profile</ion-title>
+      <ion-buttons end>
+        <button ion-button (click)="dismiss()">
+          <span ion-text showWhen="ios,core">Cancel</span>
+          <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
+        </button>
+      </ion-buttons>
+  </ion-navbar>    
+</ion-header>   
+<ion-content padding>
+  <form (submit)=updateProfile()>
+    <ion-list>
+      <ion-item>
+        <ion-label stacked>Profile Name</ion-label>
+        <ion-input type="text" [(ngModel)]="user.profileName" name="profilename"></ion-input>
+      </ion-item>
+      <ion-item>
+        <ion-label stacked>Summary</ion-label>
+        <ion-textarea type="text" [(ngModel)]="user.summary" name="summary"></ion-textarea>
+      </ion-item>
+      <div padding>
+        <button ion-button color="primary" block clear>Update</button>
+      </div>
+    </ion-list>
+  </form>
+</ion-content>

MyPassionProjectClient/src/pages/settings/settings.html

@@ -1,6 +1,12 @@
 <ion-header>
     <ion-navbar>
       <ion-title>Settings</ion-title>
+      <ion-buttons end>
+          <button ion-button (click)="dismiss()">
+            <span ion-text showWhen="ios,core">Done</span>
+            <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
+          </button>
+        </ion-buttons>
     </ion-navbar>
   </ion-header>
   <ion-content padding>
@@ -8,6 +14,9 @@
           <button ion-item (click)="updateProfile()">
             Update Profile
           </button>  
+          <button ion-item (click)="uploadPicture()">
+              Update Profile Picture
+            </button> 
       </ion-list>
   </ion-content>
 

MyPassionProjectClient/src/pages/settings/settings.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, ModalController, ViewController } from 'ionic-angular';
 import { ProfileModalPage } from './profile-modal';
+import { PictureModalPage } from './picture-modal';
+import { ProfilePage } from '../profile/profile';
 
 @IonicPage()
 @Component({
@@ -21,4 +23,13 @@ export class SettingsPage {
     modal.present();
   }
 
+  uploadPicture() {
+    let modal = this.modalCtrl.create(PictureModalPage);
+    modal.present();
+  }
+
+  dismiss() {
+    this.navCtrl.setRoot(ProfilePage);
+  }
+
 }

MyPassionProjectClient/src/providers/users-service.ts

@@ -21,7 +21,7 @@ export class UsersService{
   }
 
   updateProfile(profile): Observable<any>{
-    return this.http.put(this.USERS_API + "/1", profile);
+    return this.http.patch(this.USERS_API + "/1", profile);
   }
 
   getUserProfile(){