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

file List i am alerady getting that using fileDrop method but along with that i want the same using button click also — Dexter
– Dexter, Commented Mar 16, 2019 at 16:00

Randy Casburn · Accepted Answer · 2019-03-16 17:21:59Z

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

edited Mar 16, 2019 at 17:21

answered Mar 16, 2019 at 16:21

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

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

5 Comments

Dexter Over a year ago

yeah but here fileSelectState wont work bcoz in the fileDrop method if u see there is fileList here when ever a file is dropped it get the whole file details like filename,filesize etc but where are as fileSelectState get only file name please check the updated question where i posted the image

Randy Casburn Over a year ago

That is why I put the disclaimer. In the beginning of the question. My recommendation then will be in and edit to my answer in a moment.

Dexter Over a year ago

that will do but the variable previously which are there are used by some 1000 lines of applications this.fileSelectState[fileList[i].name] = true; so based on that logic application depended on it any way thank you randy

Randy Casburn Over a year ago

Whoops! Sorry, forget to tell you to change ti to an array!! Good catch.

Randy Casburn Over a year ago

Edited to include changing to an array type.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related