Is there a way to utilize a http POST request in order to retrieve a file object? Though the uploading of files to the server using the POST request seems successful and flawless, attempting to fetch the file results in an unusual response: console output
The console output displays what the uploaded file looks like on the server. The preceding entry on the console showcases the response received when trying to access the file from the server. Could the file be corrupted?
This is the post request used for uploading a new file to the server:
formData.append('username', localStorage.getItem('username'));
formData.append('subleaseISUcookie', localStorage.getItem('subleaseISUcookie'));
if(fileCount > 0){
formData.append('fileName', inputEl.files[0]);
console.log(inputEl.files[0]);
this.http.post(URL, formData).subscribe(
res => {
//console.log(res);
if(!res['error']){
console.log("no error");
} else {
console.log(res['error']);
}
//this.router.navigate(['login']);
},
err => {
console.log("there was an error");
console.log(err);
}
);
}
This is how the file is fetched from the server:
import { Component, OnInit } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class ProfilePictureGrabService {
constructor(private http: Http) { }
currUser: string = localStorage.getItem('username');
requestString: string = '/retrieveProfilePicture/' + this.currUser;
getProfilePic(): Observable<any> {
console.log(this.requestString);
// Get the json data string
return this.http.post( this.requestString , {
username: localStorage.getItem('username'),
subleaseISUcookie: localStorage.getItem('subleaseISUcookie')
}).map(res => {
return res;
});
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
Finally, this is how the above service is called to utilize the file object returned by the http post request:
this.profilePictureGrabService.getProfilePic().subscribe( any => {
this.retrievePic = any;
console.log(this.retrievePic);
});
var reader2 = new FileReader();
this.profilePic = this.retrievePic;
if(this.profilePic){
reader2.readAsDataURL(this.profilePic);
}else{
}
reader2.onload = function(){
(<HTMLImageElement>document.getElementById('profilePic')).src = reader2.result;
}