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())
}
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.