Preview/Read a .txt file inside Nativescript application


#1

Hey Everyone!

Possible Ways to provide the preview/read option for .txt 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 text 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="txtpreview" rows="auto, *, auto, auto, auto">
        <Label width="50%" row="0" text="Report Type : Certs" color="black"></Label>
        <TextView row="1" [text]="previewtxt" style="margin-top: 15px" borderColor="#DEDEDE" borderWidth="1" height="85%" class="input input-border" editable="false"></TextView>
        <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 "txt":
            case "TXT":
                // fetch filename from controller using app settings
                filename = this.attachedfilename;

                var afile: File;
                var afolder: Folder;
                var afoldername: string;
                var afilename: string;

                //fetch path
                afolder = documents.getFolder(afoldername || "Text Details");
                afile = afolder.getFile((afilename || filename));

                afile.readText()
                    .then(res => {
                        this.previewtxt = res;
                        //set the scope
                        this.txtpreview = true;
                    })
                    .catch(err => {
                        console.log(err);
                    });
                break;

Hope this may help someone!

Cheers!