angularangular-file-upload

How can I get the name of the file I'm uploading


I'm using angular-file-uploader (https://www.npmjs.com/package/angular-file-uploader) to upload files and it works fine, but I can't find a way to get the filename, I want something like assign it to a variable so I can use to download it later.

I got a component with the following html template:

<angular-file-uploader 
    [config]="afuConfig"
    (ApiResponse)="DocUpload($event)">
</angular-file-uploader>

and TypeScript:

this.afuConfig = {
    uploadAPI: {
        url:"http://localhost:3000/api/containers/container/upload",
    }
};

DocUpload(res){
    console.log(res);
    //I want something like this..
    //console.log(somehow.getFileName())
}

Solution

  • You have to add a selector to the template called fileUpload1 for example:

    <angular-file-uploader
      #fileUpload1
      [config]="afuConfig"
      (ApiResponse)="DocUpload($event)"
    ></angular-file-uploader>
    

    In the TypeScript part of your component you add a ViewChild property to the class:

    @ViewChild('fileUpload1')
    private fileUpload1: AngularFileUploaderComponent;
    

    And finally you can get the file name in the DocUpload function like this:

    DocUpload(res) {
      console.log(this.fileUpload1.allowedFiles[0].name);
    }
    

    The allowedFiles attribute is an array of all selected files. If you want the first one you have to use allowedFiles[0] and then read the name via the name attribute.