Unexpected token in JSON at position 0 - Angular2 - Spring API - json

Question

My REST API which has been written in SpringBoot has following method for the purpose of uploading a photo.
#RequestMapping(method = RequestMethod.POST, value = "/save-photo")
public ResponseEntity<?> uploadPhoto(#RequestPart("file") MultipartFile file){
if (file.isEmpty()) {
System.out.println("Attached file is empty");
ErrorResponse errorResponse = new ErrorResponse();
errorResponse.setMessage("Attached file is empty");
return new ResponseEntity<ErrorResponse>(errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);
}
String returnPath = null;
try {
byte[] bytes = file.getBytes();
String saveDate = new SimpleDateFormat("yyMMddHHmmssSSS").format(new Date());
Path path = Paths.get(UPLOAD_FOLDER + saveDate + "___" + file.getOriginalFilename());
Files.write(path, bytes);
returnPath = String.valueOf(path);
} catch (IOException e) {
//e.printStackTrace();
ErrorResponse errorResponse = new ErrorResponse();
errorResponse.setMessage(e.getMessage());
return new ResponseEntity<ErrorResponse> (errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);
}
System.out.println("Before returning, return path = "+returnPath);
return new ResponseEntity<String>(returnPath, HttpStatus.OK);
}
Following is the code I have written to call the above method.
savePhoto(photoToSave: File) {
let formData: FormData = new FormData();
formData.append("file", photoToSave);
let savedPath = this._http
.post(this._endpointUrl + "/save-photo", formData)
.map(
res => {
return res.json();
}
)
.catch(handleError);
return savedPath;
}
File uploading process is fine. But Angular2 gives me the following error.
Unexpected token F in JSON at position 0
Note that the F is the starting letter of the path the server returns.
Why this happens? I think the server response is not a JSON. But why? Usually RestControllers return JSON. All other controller methods in my server works fine.
How to resolve this?
Response Captured from Browser console
Header:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:3000
Content-Length:88
Content-Type:application/json;charset=UTF-8
Date:Fri, 26 May 2017 04:33:05 GMT
Vary:Origin
Response:
F:\Work\Images\170526100305388___2.jpg
EDIT
Screen shots from the brwoser
Response:

Answer 1

Posting as a answer the workaround I used to get over the issue. Hope it might help somebody.
What I did was instead of returning a String ResponseEntity, I created a JSON object which encapsulates the string I want to return and returned as the response.
JSONObject obj = new JSONObject();
obj.put("savedPath", returnPath);
return new ResponseEntity<>(obj, HttpStatus.OK);
In the front end, I just return the response.json()
let savedPath = this._http
.post(this._endpointUrl + "tender/save-new/save-photo", formData)
.map(
res => {
return res.json();
}
)
.catch(handleError);
Now in the controller class, I can access the saved path in following way.
this._tendersService.savePhoto(files[0])
.subscribe(res => {
console.log("saved path = " + res.savedPath);
}
);