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

Issue

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.

Answered By – Philipp Kief

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.