I'm using Angular2, TypeScript to send a file, along with JSON Data to a server.
Html code
<input type="file" class="form-control" name="avatar" id="uploadyour" name="uploadyour" #uploadyour="ngModel" [(ngModel)]="model.uploadyour"
(change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx" >
app.component.ts.
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import * as FileSaver from "file-saver";
import {Observable} from 'rxjs/Rx';
import { Injectable } from '@angular/core';
fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
let file: File = fileList[0];
let formData:FormData = new FormData();
console.log(file);
formData.append('uploadFile', file, file.name);
let headers = new Headers();
headers.append('enctype', 'multipart/form-data');
headers.append('Accept', 'application/json');
console.log(headers);
let options = new RequestOptions({ headers: headers });
console.log(formData);
this.http.post("http://localhost:1337/trackstatus/upload", formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
}
controller.js
upload: function (req, res) {
req.file('avatar').upload(function (err, files) {
if (err)
return res.serverError(err);
return res.json({
message: files.length + ' file(s) uploaded successfully!',
files: files
});
});
},
I am getting below error.
XMLHttpRequest cannot load http://localhost:1337/trackstatus/upload. Request header field enctype is not allowed by Access-Control-Allow-Headers in preflight response.
