Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
}
});
}
}
@OdaiTu

This comment has been minimized.

Copy link

OdaiTu commented Feb 4, 2017

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 ?

@jzapantis

This comment has been minimized.

Copy link

jzapantis commented Mar 30, 2017

When I use this code I get no provider for ngModel

@b0rgbart3

This comment has been minimized.

Copy link

b0rgbart3 commented Sep 27, 2017

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.
But if I output the formData Object (immediately after the append command) - the formData object is completely empty.
?? Any ideas why the append isn't working?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.