Load File in TypeScript

Question

I'm new in TypeScript and Angular i would like to load an image from the local disk, store this image in a variable and pass this data to another component.

Someone has some examples. I tried using an example in Javascript, but it didn't work in TypeScrupt. In HTML file use this:

 <input type="file" name="img" multiple>

I tried using the image attribute, but got an error that is undefined. Should I pass array bytes to another component or the path to this file image?

Solution 1

Since TypeScript is a superset of JavaScript, You can use FileReader API directly from JavaScript even if you are using TypeScript.

On input change event, you can bind your component function to handle the event using (change). The event.target.files is a FileList that allows you do directly access the files via an index ex: files[0] and send the File Object to the FileReader.

The issue here that a single FileReader object can only read one file at a time, so in the updated example, am looping over the files recursively to ensure only one file is being processed at a time.

The result attribute contains the data as a URL representing the file's data as a base64 encoded string.

Here is an example component using Angular 2 - TypeScript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'images',
  template: `
    <input type="file" name="img" multiple (change)="onChange($event)">
    <div *ngFor="let fileUrl of base64Files">
      <img  [src]="fileUrl" />
    </div>

  `
})
export class ImagesComponent implements OnInit {
  public base64Files: string[] = [];
  private files: any[] = [];
  private fileReader = new FileReader();

  public onChange(event: Event) {
    let files = event.target['files'];
    if (event.target['files']) {
      console.log(event.target['files']);
      this.readFiles(event.target['files'], 0);
    }
  };

  private readFiles(files: any[], index: number) {
    let file = files[index];
    this.fileReader.onload = () => {
      this.base64Files.push(this.fileReader.result);
      if (files[index + 1]) {
        this.readFiles(files, index + 1);
      } else {
        console.log('loaded all files');
      }
    };
    this.fileReader.readAsDataURL(file);
  }

}

Solution 2

you are looking for a http request to a local resource.

Visit https://angular.io/tutorial/toh-pt6#heroes-and-http for an introduction.

Store the image to a service and you can inject that service into other components: https://angular.io/tutorial/toh-pt4#creating-a-hero-service.

Comments

[Anas Al Hamdan]

let me know if you need more details.

[Walter White]

Is it a good idea to get the path to the file forwarding it to another component and displaying image there ? I read that I can get file object from FileList ovject.

[Walter White]

Anas Al Hamdan example work fine fileReader.result string and how i may display this as image; let preview = document.querySelector('img'); preview.src = fileReader.result; How to display more than one file ?

[Anas Al Hamdan]

I usually challenge new employees to do an Angualr application with similar functionality: Here are some examples that are solving a similar issue to your question: 1- github.com/belal-mazlom/angular-pix 2- github.com/malakalomari/task1-Image-gallery 3- github.com/montaserRahmani/angular2_clientside_images