Skip to content

Instantly share code, notes, and snippets.

@Toxicable
Created October 23, 2016 07:18
Show Gist options
  • Save Toxicable/1c736ed16c95bcdc7612e2c406b5ce0f to your computer and use it in GitHub Desktop.
Save Toxicable/1c736ed16c95bcdc7612e2c406b5ce0f to your computer and use it in GitHub Desktop.
How to upload files in angular 2
/**
* Created by Fabian on 19/10/2016.
*/
import { Component, ElementRef, Input } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'file-upload',
template: '<input type="file" [attr.multiple]="multiple ? true : null" (change)="upload()" >'
})
export class FileUploadComponent {
constructor(private http: Http,
private el: ElementRef
) {}
@Input() multiple: boolean = false;
upload() {
let inputEl = this.el.nativeElement.firstElementChild;
if (inputEl.files.length == 0) return;
let files :FileList = inputEl.files;
const formData = new FormData();
for(var i = 0; i < files.length; i++){
formData.append(files[i].name, files[i]);
}
this.http
.post('/api/test/fileupload', formData)
.subscribe();
}
}
@c17r
Copy link

c17r commented Jun 13, 2018

@mdmota IE9 doesn't support the File Api: https://caniuse.com/#feat=fileapi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment