import { Component, Input, AfterViewInit } from '@angular/core'; | |
import { NgModel, DefaultValueAccessor, NgControl } from '@angular/forms'; | |
import { Http, Headers, RequestOptions } from '@angular/http'; | |
@Component({ | |
selector: 'app-file-uploader', | |
template: '<input type="file" (change)="updated($event);">', | |
providers: [NgModel, DefaultValueAccessor] | |
}) | |
export class FileUploaderComponent implements AfterViewInit { | |
static ROOT = '/rest/asset'; | |
@Input() private companyId: string = ''; | |
private value: string; | |
private changeListener: Function; | |
constructor(private http: Http, private input: NgControl) { | |
this.input.valueAccessor = this; | |
} | |
ngAfterViewInit() { | |
} | |
writeValue(obj: any): void { | |
this.value = obj; | |
} | |
registerOnChange(fn: any): void { | |
this.changeListener = fn; | |
} | |
registerOnTouched(fn: any): void { | |
} | |
updated($event) { | |
const files = $event.target.files || $event.srcElement.files; | |
const file = files[0]; | |
const formData = new FormData(); | |
formData.append('file', file); | |
const headers = new Headers({}); | |
let options = new RequestOptions({ headers }); | |
let url = FileUploaderComponent.ROOT + (this.companyId ? '/' + this.companyId : ''); | |
this.http.post(url, formData, options).subscribe(res => { | |
let body = res.json(); | |
this.value = body.filename; | |
if (this.changeListener) { | |
this.changeListener(this.value); | |
} | |
}); | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
When I use this code I get no provider for ngModel |
This comment has been minimized.
This comment has been minimized.
This example doesn't work for me. If I output the file object, I get a full File Object with all the details listed in the console. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
its a great rellay
so i can post a image and other data like name , city and age with the same request ?
and what if i set the input tag to multible ?
i can upload more thann one image ?