How to get the file value using ng2-file-upload using angular on button click

Question

here i am creating a file upload using ng2-file-upload where i am dropping file and usually i am getting value of that till now it is fine now my issue is even thought i placed drop function but after dropping file i also want to retrieve the file upload value using a button click function how can i achieve this below is my code

Note: here i need to get the fileList value

currently im getting file list values using filedropped method but along with that by using the button click i need to get the value

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';


const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  fileSelectState = {};
  formVisible = true;
  temp: any;

  public showInputForm: boolean = true;
  public selectAll: boolean = true;
  selectedAll: any;


  imga = "http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/Button-Upload-icon.png";

  public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;
  public selectedFilesArray = [];
  private selectedFile;



    public selectFile(e: any): void {
    var target = e.target || e.srcElement || e.currentTarget;
    var value = target.innerHTML;
    this.selectedFile = value;
    this.selectAll = true;
    this.selectedFilesArray = [];
    this.selectedFilesArray.push(this.selectedFile);

  }
  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

    public selectAllFiles(e: any): void {

    this.selectedFilesArray = [];
    if (e.target.checked) {

      this.selectAll = true;

      for (var item in this.uploader.queue) {
        this.selectedFilesArray.push(this.uploader.queue[item].file.name);
      }
    }

    for (var item in this.uploader.queue) {
      this.fileSelectState[this.uploader.queue[item].file.name] = e.target.checked
    }


  }
 public fileDropped(fileList: any): void
  {
    for(var i =0 ; i< fileList.length; i++){
        this.fileSelectState[fileList[i].name] = true;
    }

  }

   public fileChecked(e: any): void {
    if (e.target.checked) {
      console.log(this.selectedFilesArray);
      this.selectedFilesArray.push(e.target.value);
      if (this.selectedFilesArray.length > 1) {

        this.selectedFile = e.target.value;


      }
      else {

        this.selectedFile = e.target.value;


      }

    }
    if (!e.target.checked) {

      var index = this.selectedFilesArray.indexOf(e.target.value, 0);
      if (index > -1) {
        this.selectedFilesArray.splice(index, 1);
        if (this.selectedFilesArray.length > 1) {


          this.selectedFile = this.selectedFilesArray[0];


        }
        else if (this.selectedFilesArray.length == 1) {

          this.selectAll = false;
          this.selectedFile = this.selectedFilesArray[0];


        }
        else if (this.selectedFilesArray.length == 0) {

          this.selectedFile = '';


        }
      }

    }



  }

  getInfo(){
    console.log('file info');
  }

}

url: https://stackblitz.com/edit/angular-s6g1v6

Answer 1

Edit: OP wants File objects available within the scope of the component. Code modified below.

Store the entire File object rather than just its name property. First, change the Change the fileSelectState to and array (or use a different class member for this). Then Change fileDropped() method to this:

public fileDropped(fileList: any): void
  {
    for(var i =0 ; i< fileList.length; i++){
        this.fileSelectState.push(fileList[i]);
    }

  }

Note: if you don't have to support IE, you can replace the for loop with:

this.fileSelectState = Array.from(fileList);

Change:

getInfo(){
  console.log('file info');
}

To:

getInfo(){
  console.log(this.fileSelectState);
}

Wherever you need the file name then use this:

this.fileSelectState[0].name