I am using Angular 2 for the frontend and Node.js for the backend. I am trying to upload a file to Azure storage blob container but keep getting an error when trying to send the image to api. Any help will be appreciated thanks.
This is the error on the server side:
contentType: files.myfile.type,
TypeError: Cannot read property 'type' of undefined
The error on client side
core.js:1521 ERROR
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
error
:
ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers
:
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message
:
"Http failure response for (unknown url): 0 Unknown Error"
name
:
"HttpErrorResponse"
ok
:
false
status
:
0
statusText
:
"Unknown Error"
url
:
null
__proto__
:
HttpResponseBase
upload.component.ts
export class UploadComponent implements OnInit {
selectedFile: File = null;
onFileSelected(event) {
this.selectedFile = <File>event.target.files[0];
}
onUpload() {
const fd = new FormData();
fd.append('image', this.selectedFile, this.selectedFile.name);
this.http.post('http://localhost:3000/upload', fd , {
reportProgress : true,
observe: 'events'
}).subscribe( event => {
console.log(event);
});
}
constructor(private http: HttpClient) {}
ngOnInit() {
}
}
server.js
app.post('/upload', function(req, res) {
var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {
var options = {
contentType: files.myfile.type,
metadata: { fileName: files.myfile.name }
};
blobSvc.createBlockBlobFromLocalFile('images', files.myfile.name, files.myfile.path, options, function(error, result, response) {
if(!error){
// file uploaded
res.send('file uploaded!');
}
});
});
});
