Angular 2 upload multiple files
Add the multiple
attribute to you input:
<input type="file" (change)="onChange($event)" multiple />
And to show all file names in your input, do it like in this plunker: https://plnkr.co/edit/WvkNbwXpAkD14r417cYM?p=preview
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<input type="file" multiple (change)="onChange($event, showFileNames)" />
<input #showFileNames />
</div>
`,
})
export class App {
constructor() {
this.name = 'Angular2'
}
onChange(event: any, input: any) {
let files = [].slice.call(event.target.files);
input.value = files.map(f => f.name).join(', ');
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Or use your variable instead of putting it directly to that input!