Ionic (Angular) - Read a file and parse its content

Question

I am working on a project where I want to read content from a file and want to get useful information from its data and display it to user, for example suppose I have a text file (.txt) in which there are 10 lines like "sham went to school", "Rohan bought a new pen" etc. I know this is a silly example but just want to deliver the basic idea. I want to read this content in Ionic and want to show it to user in a beautiful and elegant way after some sort of manipulation. I am using cordova file chooser plugin, now want to read file content as I mentioned above. Any help will be appreciated, Thanks in advance :)

I have tried http get function to read a file but don't know how to use it with choosen file. I made below function and now I have no idea how to pass that file as argument to this function

public readFile(file) {
    this.http.get(file).pipe(map(res => res.text()))                
     .subscribe(data => {                         
      this.requests = data.split('\n');
      this.testtext = this.requests[20];
});

@Aragorn thanks for reply, yes I am referring to file upload, I want to parse content of that uploaded file. — Neeraj Sharma
– Neeraj Sharma, Commented Jan 17, 2019 at 18:04
Why are you doing http.get to upload a file? Hence my question, uploading a file or getting it from a service? — Aragorn
– Aragorn, Commented Jan 17, 2019 at 18:07
I was totally blank for this concept so I made some random google search and found this solution, I just want to upload a text file and want to parse its content and want to display it in the view after some manipulation. — Neeraj Sharma
– Neeraj Sharma, Commented Jan 17, 2019 at 18:10

Marco · Accepted Answer · 2020-08-19 15:53:30Z

4

Here's a file upload function you can use. This uses FileReader. read more

Add this to your component file and use it in template by binding it to an event.

I've added as much comment as I thought would be useful, but let me know if you get confused in any line.

public uploadFile(files: FileList): void {
    let results = [];
    if (files && files.length > 0) {
        const file: File = files.item(0); //assuming only one file is uploaded
        console.log('Uploaded file, Filename:' + file.name + 'Filesize:' + file.size + 'Filetype:' + file.type);
        const reader: FileReader = new FileReader();
        reader.readAsText(file);
        reader.onload = (e) => {
        const fileContent: string = reader.result as string;
        console.log('fileContent:' + fileContent);
        const lines: string[] = fileContent.split('\n'); //this depends on your line end character, I'm using \n in general
        //lines is an array of string, such as "Sham went to school", loop over it and process as you like
        };
    }
}

You can use it in your template, like:

<input type="file" (change)="uploadFile($event.target.files)">

edited Aug 19, 2020 at 15:53

Marco

1,10310 silver badges24 bronze badges

answered Jan 17, 2019 at 18:13

Aragorn

5,3295 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neeraj Sharma Over a year ago

wow! It works, @Aragorn brother, you are a life saver. Thanks a million.

Collectives™ on Stack Overflow

Ionic (Angular) - Read a file and parse its content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related