Show how to use a local file

Author: EddyVerbruggen

demo-ng/app/images/puppy.jpg

@@ -3,10 +3,11 @@
   <Label row="0" text="Pick the image processing source:" textWrap="true"></Label>
 
   <FlexboxLayout row="1" flexDirection="row" justifyContent="space-around">
-    <Button text="Cameraroll" textWrap="true" (tap)="fromCameraroll()" class="button"></Button>
+    <Button text="Puppy" textWrap="true" (tap)="fromAppFolder()" class="button"></Button>
+    <Button text="Cam roll" textWrap="true" (tap)="fromCameraroll()" class="button"></Button>
     <!-- the image may require rotation on Android, and permission may be required - not feeling like exposing this for now -->
     <iOS>
-      <Button text="Cam picture" textWrap="true" (tap)="fromCameraPicture()" class="button"></Button>
+      <Button text="Cam pic" textWrap="true" (tap)="fromCameraPicture()" class="button"></Button>
     </iOS>
     <Button text="Cam feed" textWrap="true" (tap)="fromCameraFeed()" class="button"></Button>
   </FlexboxLayout>

demo-ng/app/tabs/mlkit/mlkit.component.html

@@ -1,6 +1,7 @@
 import { Component, NgZone } from "@angular/core";
 import { RouterExtensions } from "nativescript-angular";
-import { ImageSource } from "tns-core-modules/image-source";
+import { fromFile, ImageSource } from "tns-core-modules/image-source";
+import * as fileSystemModule from "tns-core-modules/file-system";
 import { action } from "tns-core-modules/ui/dialogs";
 import { ImageAsset } from "tns-core-modules/image-asset";
 import { isIOS } from "tns-core-modules/platform";
@@ -81,6 +82,18 @@ export class MLKitComponent {
     });
   }
 
+  fromAppFolder(): void {
+    const folder = fileSystemModule.knownFolders.currentApp();
+    const path = fileSystemModule.path.join(folder.path, "/images/puppy.jpg");
+    const exists = fileSystemModule.File.exists(path);
+    console.log(`Does it exist: ${exists}`);
+
+    const imageSource = fromFile(path);
+    this.pickedImage = imageSource;
+    // give the user some time to to see the picture
+    setTimeout(() => this.selectMLKitFeature(imageSource), 500);
+  }
+
   fromCameraPicture(): void {
     if (!isIOS) {
       Camera.requestPermissions();
@@ -94,7 +107,7 @@ export class MLKitComponent {
     }).then(imageAsset => {
       new ImageSource().fromAsset(imageAsset).then(imageSource => {
         this.pickedImage = imageSource;
-        // give the user some to to see the picture
+        // give the user some time to to see the picture
         setTimeout(() => this.selectMLKitFeature(imageSource), 500);
       });
     });
@@ -133,7 +146,7 @@ export class MLKitComponent {
             this.zone.run(() => {
               this.pickedImage = imageSource;
             });
-            // give the user some to to see the picture
+            // give the user some time to to see the picture
             setTimeout(() => this.selectMLKitFeature(imageSource), 500);
           });
         })