14.18 image upload (alternate cloudinary)

Author: webdevtut

src/app/places/offers/new-offer/new-offer.page.html

@@ -5,7 +5,7 @@
     </ion-buttons>
     <ion-title>New Offer</ion-title>
     <ion-buttons slot="primary">
-      <ion-button (click)="onCreateOffer()" [disabled]="form.invalid">
+      <ion-button (click)="onCreateOffer()" [disabled]="form.invalid || !form.get('image').value">
         <ion-icon name="checkmark" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
@@ -71,7 +71,7 @@
             </ion-col>
           </ion-row>
           <ion-row>
-            <ion-col size-sm="3" offset-sm="3">
+            <ion-col size-sm="6" offset-sm="3" >
               <app-image-picker (imagePick)="onImagePicked($event)"></app-image-picker>
             </ion-col>
           </ion-row>

src/app/places/offers/new-offer/new-offer.page.ts

@@ -3,6 +3,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { PlacesService } from '../../places.service';
 import { Router } from '@angular/router';
 import { LoadingController } from '@ionic/angular';
+import { switchMap } from 'rxjs';
 
 @Component({
   selector: 'app-new-offer',
@@ -40,37 +41,45 @@ export class NewOfferPage implements OnInit {
         updateOn: 'blur',
         validators: [Validators.required],
       }),
+      image: new FormControl(null),
     });
   }
 
   onCreateOffer() {
-    if (this.form.invalid) {
+    if (this.form.invalid || !this.form.get('image').value) {
       return;
     }
+
     this.loaderCtrl
       .create({
         message: 'Creating place..',
       })
       .then((loadingEl) => {
         loadingEl.present();
         this.placeService
-        .addplaces(
-          this.form.value.title,
-          this.form.value.description,
-          +this.form.value.price,
-          new Date(this.form.value.dateFrom),
-          new Date(this.form.value.dateTo)
-        )
-        .subscribe(() => {
-          loadingEl.dismiss();
-          this.form.reset();
-          this.Router.navigate(['/places/tabs/offers']);
-        });
+          .uploadImage(this.form.get('image').value)
+          .pipe(
+            switchMap(uploadRes => {
+              return this.placeService.addplaces(
+                this.form.value.title,
+                this.form.value.description,
+                +this.form.value.price,
+                new Date(this.form.value.dateFrom),
+                new Date(this.form.value.dateTo),
+                uploadRes
+              );
+            })
+          )
+          .subscribe(() => {
+            loadingEl.dismiss();
+            this.form.reset();
+            this.Router.navigate(['/places/tabs/offers']);
+          });
       });
   }
 
 
   onImagePicked(imgData) {
-
+    this.form.patchValue({ image: imgData });
   }
 }

src/app/places/places.service.ts

@@ -80,19 +80,34 @@ export class PlacesService {
       );
   }
 
+  uploadImage(image: File) {
+    return this.http
+      .post(
+        'http://localhost:5000/api/uploadImage',
+        { image },
+        { responseType: 'text' }
+      )
+      .pipe(
+        map((url) => {
+          return url;
+        })
+      );
+  }
+
   addplaces(
     title: string,
     description: string,
     price: number,
     dateFrom: Date,
-    dateTo: Date
+    dateTo: Date,
+    imageUrl: string
   ) {
     let generatedId: string;
     const newPlace = new Place(
       Math.random().toString(),
       title,
       description,
-      'https://cf.bstatic.com/xdata/images/hotel/max1280x900/251732450.jpg?k=c291e2faa860f79f1a2f81766e5d518ab05bc27f0e421b7d5e1ec6f4e1dd7b54&o=&hp=1',
+      imageUrl,
       price,
       dateFrom,
       dateTo,

src/app/shared/pickers/image-picker/image-picker.component.scss

@@ -0,0 +1,17 @@
+.picker {
+    width: 30rem;
+    max-width: 80%;
+    height: 20rem;
+    max-height: 30vh;
+    border: 1px solid var(--ion-color-primary);
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

src/app/shared/pickers/image-picker/image-picker.component.ts

@@ -7,7 +7,7 @@ import { Camera, CameraResultType } from '@capacitor/camera';
   styleUrls: ['./image-picker.component.scss'],
 })
 export class ImagePickerComponent implements OnInit {
-  @Output() imagePick = new EventEmitter<string>();
+  @Output() imagePick = new EventEmitter<string | File>();
 
   selectedImage: string;
 
@@ -18,14 +18,14 @@ export class ImagePickerComponent implements OnInit {
   onPickImage() {
     Camera.getPhoto({
       quality: 90,
-      allowEditing: true,
+      allowEditing: false,
       height: 320,
-      width: 200,
-      resultType: CameraResultType.Uri,
+      width: 600,
+      resultType: CameraResultType.DataUrl,
     })
       .then((image) => {
-        this.selectedImage = image.webPath;
-        this.imagePick.emit(image.webPath);
+        this.selectedImage = image.dataUrl;
+        this.imagePick.emit(image.dataUrl);
       })
       .catch((err) => {
         console.log(err);