Angular - POST uploaded file
Solution 1
Look at my code, but be aware. I use async/await, because latest Chrome beta can read any es6 code, which gets by TypeScript with compilation. So, you must replace asyns/await by .then()
.
Input change handler:
/**
* @param fileInput
*/
public psdTemplateSelectionHandler (fileInput: any){
let FileList: FileList = fileInput.target.files;
for (let i = 0, length = FileList.length; i < length; i++) {
this.psdTemplates.push(FileList.item(i));
}
this.progressBarVisibility = true;
}
Submit handler:
public async psdTemplateUploadHandler (): Promise<any> {
let result: any;
if (!this.psdTemplates.length) {
return;
}
this.isSubmitted = true;
this.fileUploadService.getObserver()
.subscribe(progress => {
this.uploadProgress = progress;
});
try {
result = await this.fileUploadService.upload(this.uploadRoute, this.psdTemplates);
} catch (error) {
document.write(error)
}
if (!result['images']) {
return;
}
this.saveUploadedTemplatesData(result['images']);
this.redirectService.redirect(this.redirectRoute);
}
FileUploadService. That service also stored uploading progress in progress$ property, and in other places, you can subscribe on it and get new value every 500ms.
import { Component } from 'angular2/core';
import { Injectable } from 'angular2/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/share';
@Injectable()
export class FileUploadService {
/**
* @param Observable<number>
*/
private progress$: Observable<number>;
/**
* @type {number}
*/
private progress: number = 0;
private progressObserver: any;
constructor () {
this.progress$ = new Observable(observer => {
this.progressObserver = observer
});
}
/**
* @returns {Observable<number>}
*/
public getObserver (): Observable<number> {
return this.progress$;
}
/**
* Upload files through XMLHttpRequest
*
* @param url
* @param files
* @returns {Promise<T>}
*/
public upload (url: string, files: File[]): Promise<any> {
return new Promise((resolve, reject) => {
let formData: FormData = new FormData(),
xhr: XMLHttpRequest = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.response));
} else {
reject(xhr.response);
}
}
};
FileUploadService.setUploadUpdateInterval(500);
xhr.upload.onprogress = (event) => {
this.progress = Math.round(event.loaded / event.total * 100);
this.progressObserver.next(this.progress);
};
xhr.open('POST', url, true);
xhr.send(formData);
});
}
/**
* Set interval for frequency with which Observable inside Promise will share data with subscribers.
*
* @param interval
*/
private static setUploadUpdateInterval (interval: number): void {
setInterval(() => {}, interval);
}
}
Solution 2
Looking onto this issue Github - Request/Upload progress handling via @angular/http, angular2 http does not support file upload yet.
For very basic file upload I created such service function as a workaround (using Тимофей's answer):
uploadFile(file:File):Promise<MyEntity> {
return new Promise((resolve, reject) => {
let xhr:XMLHttpRequest = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(<MyEntity>JSON.parse(xhr.response));
} else {
reject(xhr.response);
}
}
};
xhr.open('POST', this.getServiceUrl(), true);
let formData = new FormData();
formData.append("file", file, file.name);
xhr.send(formData);
});
}
Solution 3
your http service file:
import { Injectable } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import {Observable} from 'rxjs/Rx';
import { Constants } from './constants';
declare var $: any;
@Injectable()
export class HttpClient {
requestUrl: string;
responseData: any;
handleError: any;
constructor(private router: Router,
private http: Http,
private constants: Constants,
) {
this.http = http;
}
postWithFile (url: string, postData: any, files: File[]) {
let headers = new Headers();
let formData:FormData = new FormData();
formData.append('files', files[0], files[0].name);
// For multiple files
// for (let i = 0; i < files.length; i++) {
// formData.append(`files[]`, files[i], files[i].name);
// }
if(postData !=="" && postData !== undefined && postData !==null){
for (var property in postData) {
if (postData.hasOwnProperty(property)) {
formData.append(property, postData[property]);
}
}
}
var returnReponse = new Promise((resolve, reject) => {
this.http.post(this.constants.root_dir + url, formData, {
headers: headers
}).subscribe(
res => {
this.responseData = res.json();
resolve(this.responseData);
},
error => {
this.router.navigate(['/login']);
reject(error);
}
);
});
return returnReponse;
}
}
call your function (Component file):
onChange(event) {
let file = event.srcElement.files;
let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example.
this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => {
console.log(result);
});
}
your html code:
<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">
Solution 4
In my project , I use the XMLHttpRequest to send multipart/form-data. I think it will fit you to.
and the uploader code
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/rest/api', true);
xhr.withCredentials = true;
xhr.send(formData);
Here is example : https://github.com/wangzilong/angular2-multipartForm
Solution 5
First, you have to create your own inline TS-Class, since the FormData Class is not well supported at the moment:
var data : {
name: string;
file: File;
} = {
name: "Name",
file: inputValue.files[0]
};
Then you send it to the Server with JSON.stringify(data)
let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethods.Post;
opts.headers = headers;
this.http.post(url,JSON.stringify(data),opts);
Comments
-
Kamal almost 2 years
I'm using Angular, TypeScript to send a file, along with JSON Data to a server.
Below is my code:
import {Component, View, NgFor, FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/angular2'; import {Http, Response, Headers} from 'http/http'; @Component({ selector: 'file-upload' }) @View({ directives: [FORM_DIRECTIVES], template: ` <h3>File Upload</h3> <div> Select file: <input type="file" (change)="changeListener($event)"> </div> ` }) export class FileUploadCmp { public file: File; public url: string; headers: Headers; constructor(public http: Http) { console.log('file upload Initialized'); //set the header as multipart this.headers = new Headers(); this.headers.set('Content-Type', 'multipart/form-data'); this.url = 'http://localhost:8080/test'; } //onChange file listener changeListener($event): void { this.postFile($event.target); } //send post file to server postFile(inputValue: any): void { var formData = new FormData(); formData.append("name", "Name"); formData.append("file", inputValue.files[0]); this.http.post(this.url +, formData , { headers: this.headers }); } }
How can I transform the
formData
to String and send it to the server? I remember in AngularJS (v1) you would usetransformRequest
. -
Tunaki over 8 yearsJust linking to your own library (or utility) is not a good answer. Linking to it, explaining why it solves the problem, providing code using it to do so and disclaiming makes for a better answer. See: How can I link to an external resource in a community-friendly way?
-
patad about 8 yearsI also needed to add:
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
for it to work -
patad about 8 yearsGreat! For it to work I however needed to add
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
. -
Ng2-Fun about 8 years@patad: do you have problem with it? When I upload xml file, it will automatically add ' ------WebKitFormBoundaryklb8qUzyCQJSI440 Content-Disposition: form-data; name="file" ' inside my file. I don't want to add extra data to file during transmission, do you know how to do with that? And for upload image like jpg, after uploaded, it was no longer a jpg file. So my question is: how to keep the original file during transmission?
-
Steve about 8 yearsThanks! If authorization is required adding this after the xhr.open line worked for me:
xhr.setRequestHeader('Authorization', 'Bearer ' + __your_auth_key__);
-
jrub almost 8 yearsWhy do we need the
setInterval()
thing? -
Manish Jain over 7 yearsIs this supported now?
-
Andrii Karaivanskyi over 7 years@ManishJain check out the issue status github.com/angular/http/issues/75 So far it is open.
-
cbros2008 over 7 years@AndreyKarayvansky, is there an updated link? I'm getting a 404 page and struggling to find the relevant issue.
-
Jan Nielsen about 7 yearsLink updated -- but still no direct support for progress because
fetch
lacks this functionality and Angular does not want to tie thehttp
API to XHR... -
csga5000 about 7 yearsOne of the only answers that actually uses angular
-
csga5000 about 7 yearsdeveloper.mozilla.org/en-US/docs/Web/API/… Support isn't actually so bad. I would imagine JSON.stringify would have some issues if the uploaded files happen to be binaries or some such thing..
-
Muhammad Shahzad about 7 yearsHow can I fix this
error TS2339: Property 'files' does not exist on type 'Element'.
thanks -
Muhammad Shahzad about 7 years
onChange() {...}
should beonChange(event) {...}
will fix the error: property files does not exist ;) -
Paulo Pedroso almost 7 yearsI am using a brand new Angular 4 and it seems they didn't fix this already. Either this or I missed the point. The thing is the file never went through. Thanks to your function I got it working. Thank you man.
-
srv_sud over 5 yearsdoes not work for me. it is unable to find the file on backend node which uses multer.
-
Kumaresan Sd over 2 yearsstill no support from angular - github.com/angular/angular/issues/37597