Angular: FileReader - Store Files from Folder-Input in Array

Question

I have this input with which i Upload a Folder:

<div class="form-group">
        <input type="file" id="file" (change)="readInput($event)" webkitdirectory directory multiple >
</div>

The Folder Contains a number of different csv files. For processing the input, I have this Filereader.

readInput(fileChangeEvent: Event) {
return new Observable<any>(obs => {
    const file = (fileChangeEvent.target as HTMLInputElement).files[0];
    if (file) {
      const fileReader = new FileReader();
      fileReader.onload = e => {
        obs.next({
          result: fileReader.result
        });
      };
      fileReader.readAsText(file);
    }
  });
}

Now, the Observable of my Filereader seems to return the content of a random file from the folder. What i'd like to do would be to save the different Files-contents in an Array so that I could access them later in the code.

What I tried was adding the result to an array in the observable:

filearray = []

    readInput(fileChangeEvent: Event) {
    return new Observable<any>(obs => {
        const file = (fileChangeEvent.target as HTMLInputElement).files[0];
        if (file) {
          const fileReader = new FileReader();
          fileReader.onload = e => {
            obs.next({
                 this.filearray.push(result);
            });
          };
          fileReader.readAsArrayBuffer(file);
        }
      });
    }

but this resulted in the array being empty.

How could I save the files in an array? Are there easier ways to handle a folder input than the FileReader?

TheUnreal · Accepted Answer · 2019-09-23 10:26:50Z

1

You are uploading a folder and access only one file from the folder (file[0]).

If you need to read all the files, you can try something like this:

readInput(fileChangeEvent: Event) {
   this.readFile(0, files);
}

private readFile(index, files) {
    const reader = new FileReader();
    if (index >= files.length ) {
      console.log(this.files);
      obs.next({result: this.files});
      return;
    }
    const file = files[index];
    reader.onload = (e: any) => {
      const bin = e.target.result;
      this.files.push(e.target.result);
      this.readFile(index + 1, files);
    };
      reader.readAsBinaryString(file);
  }

Demo: https://codesandbox.io/embed/angular-joe2p

edited Sep 23, 2019 at 10:26

answered Sep 23, 2019 at 8:42

TheUnreal

24.6k52 gold badges173 silver badges292 bronze badges

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

6 Comments

J.Doe Over a year ago

This seems like a possible solution but i get two errors which i don't understand here. each time files is used : Property 'files' does not exist on type 'EventTarget'. and at e.target.result: Property 'result' does not exist on type 'EventTarget'.

J.Doe Over a year ago

I am still getting similar errors. Tried to reproduce it here codesandbox.io/s/angular-hksyx in the chart.component.ts

TheUnreal Over a year ago

You forgot to declare some variables, It will work here: codesandbox.io/embed/angular-joe2p

J.Doe Over a year ago

Thank You! but what i am still confused about, does the readInput now return something? or else how could i subscribe to the data? when trying something like this.readInput(data).subscribe it won't work because "Property 'subscribe' does not exist on type 'void'" codesandbox.io/s/angular-l8u16

J.Doe Over a year ago

I am trying to access the data after i've chosen the folder. Does it return the array or how can i use it?

|

zerocewl · Accepted Answer · 2019-09-23 08:45:28Z

1

I would suggest to use a npm package like angular-file-uploader

Angular file uploader is an Angular 2/4/5/6 file uploader module with Real-Time Progress Bar, Angular Universal Compatibility and multiple themes which includes Drag and Drop and much more.

Demo: https://kzrfaisal.github.io/#/afu

Here is one example How to handle folder uploads in Angular, if you want to implement your own solution.

One complete example Creating a File Upload Component in Angular with a complete github repo to clone.

edited Sep 23, 2019 at 8:45

answered Sep 23, 2019 at 8:35

zerocewl

12.9k8 gold badges34 silver badges58 bronze badges

Collectives™ on Stack Overflow

Angular: FileReader - Store Files from Folder-Input in Array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related