Preview/Read an Image files inside Nativescript application


#1

Hey Everyone!

Possible Ways to provide the preview/read option for Image files inside the Nativescript applications :face_with_monocle:

Looking ways for NS flavors :

  • NativeScript Core applications

  • NativeScript with Angular applications

Looking Possible Ways :

  • Load file from FileSystem/external storage

  • Load file from URL

  • Load file from device’s local database

Suggest your ideas here!

Cheers!


#2

Hey all!

This is how i have managed the Image file preview with NS application.

Nativescript with Angular

  • Preview from Local storage using FileSystem

Here I am having one separate modal page for managing all previews.

Preview.html

    <StackLayout *ngIf="picpreview" rows="auto, *, auto, auto, auto">
        <Label width="50%" row="0" text="Report Type : Certs" color="black"></Label>
        <Image row="1" [src]="previewimg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"> </Image>
        <Label row="2" text="Comments" color="black"></Label>
        <TextView row="3" editable="false"></TextView>
        <Button row="4" width="30%" class="btn btn-primary btn-rounded-sm" text="Close" (tap)="submit()"></Button>
    </StackLayout>
Preview.ts

            case "png":
            case "PNG":
            case "jpg":
            case "JPG":
            case "JPEG":
            case "jpeg":
                // fetch filename
                filename = this.attachedfilename;

                //fetch path
                folder = fs.path.join(documents.path, "Image Details", filename);
                console.log("test folder path " + folder)
                this.previewimg = imageSource.fromFile(folder);
                //set the scope
                this.picpreview = true;
                break;

Hope this may help and save someone time!

Cheers!