how to download a file with php and angular

Question

I already uploaded a file and saved the path into my database, but the problem now is that I can't download it. I have already tested the PHP code and it works, but when I try to download it from the Angular side it doesn't. Instead I get this error in the console:

httpErrorResponse error: SyntaxError: Unexpected token p in JSON at position 0
  at JSON.parse (<anonymous>)
  at XMLHttpRequest.onLoad (localhost:4200/vendor.js:164415:51)
  at ZoneDelegate.invokeTask (localhost:4200/polyfills.js:9799:31)
  .........

ANGULAR SERVICE:

public getjointes(filepath:string){
  const params = new HttpParams()
    .set('filepath', filepath);
  return this.http.get(url+'/download.php', {params: params });
}

TYPESCRIPT / function

telecharger(path:string) {
    console.log(path);
    this.stream.getjointes(path).subscribe(response => {
        console.log(response);
    });
}

PHP CODE:

$rest = $_GET['filepath'] ;

echo($rest);
$filepath = 'upload/' . $rest;

if (file_exists($filepath)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename=' . basename($filepath));
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize('upload/' . $rest));
    readfile('upload/' . $rest);
    header("Access-Control-Expose-Headers: Content-Disposition");   
}
else{
    echo ('noo');
}

Answer 1

Ok I'm going to assume the echo statements in your PHP are just for testing, based on the error messages you included in comments.

I think the problem you're having is that Angular assumes the response will be JSON and attempts to parse it. To avoid this behaviour , you can set the responseType parameter to "text" or "blob" (for binary data) in your code:

public getjointes(filepath:string) {
    const params = new HttpParams()
      .set('filepath', filepath);
    return this.http.get(url+'/download.php', {params: params, responseType: "text"});
}

Note that any output before a call to header() will result in the HTTP header not getting set. Your PHP code calls header() after readfile() . That header will be ignored. In addition, if a file is not found you should say so with a proper 404 header. This way your client-side code can respond properly to failures. Your PHP should look like this:

$rest = $_GET['filepath'];
$filepath = 'upload/' . $rest;

if (file_exists($filepath) && is_readable($filepath)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename=' . basename($filepath));
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize('upload/' . $rest));
    header("Access-Control-Expose-Headers: Content-Disposition");   
    readfile('upload/' . $rest);
} else {
    header("HTTP/1.0 404 Not Found");
}