File Transfer Download is a Corrupted or missing file

I am trying to download an image file that is being hosted on my web server. This is the back end where my app communicates with:

if (file_exists($server_file))
{
    $filesize = filesize($server_file);

    header('Content-Type: '.mime_content_type($server_file));
    header('Content-Disposition: attachment; filename="'.$filename.'"');
    header('Content-Transfer-Encoding: binary');
    header('Content-Length: '.sprintf('%d', $filesize));
    header('Expires: 0');

    while (ob_get_level())
    {
        ob_end_clean();
    }

    @readfile($server_file);
}

On my app, I send a FileTransfer download request to attachments.php?file&line_id=1 which should read the file and send it to the app for download:

const mimeType = this.globalsService.getMimeType(fileExt);
const fileUrl =
  url.replace("https", "http") +
  this.pageUrl +
  "?file&line_id=" +
  this.attachments[index].line_id;

const downloadPath =
  this.file.externalRootDirectory +
  "download/" +
  this.attachments[index].filename;

this.fileTransfer.download(encodeURI(fileUrl), downloadPath, true).then(
  entry => {
    console.log(entry);
    this.fileOpener
      .open(entry.nativeURL, mimeType)
      .then(() => {
        console.log("done");
      })
      .catch(error => {
        console.log(error);
      });
  },
  error => {
    console.log(error);
  }
);

It downloads the file but the file seems to be corrupted or missing as the filesize is only 300 bytes while the actual full size is about 3.4mb. The image does not display anything either when opened. Any ideas?