Laravel从浏览器下载的文件已损坏

Question

I am trying to download the file saved in s3. So I have codes like below.

static public function download($key, $disk = 's3') : object
{

    $file = FileHelper::get($key);

    $local = Storage::disk('local');
    $local->put(basename($key), $file);
    $pathToFile = storage_path().'/app/'.basename($key);

    $headers = [
        'Content-Type' => \GuzzleHttp\Psr7\mimetype_from_filename(basename($key)),
        'Content-Description' => 'File Transfer',
        'Content-Disposition' => "attachment; filename=' ". basename($key),
        'filename'=> basename($key)
    ];

    $repsonse = response()->download($pathToFile, basename($key), $headers)->deleteFileAfterSend(true);
    ob_end_clean();

    return $repsonse;
}

And I have the javascript code like below.

downloadFile() {
            var app = this;

            var url = baseRoute + 'files/' + this.fileId + '/download';
            axios.get(url, {
                headers: {
                    Authorization: 'bearer ' + this.Authentication.tokenData().token,
                    responseType : "blob"
                }
            }).then(function (response) {

                var today = ((new Date()).toISOString()).slice(2,10),
                    filename = today.replace(/-/gi, "")+' '+ app.fileTitle;

                let blob = new Blob([response.data], {
                    type: response.headers['content-type']
                });

                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                link.click();

            }).catch(function (response) {
                console.log(response);
            });
        }

The file is downloaded, however, the file is corrupted. (it would not open) I checked S3 bucket to see if the file is corrupted during upload, but it was fine there.

What am I doing wrong? Any advice or suggestion would be appreciated.

Thank you in advance.

Added: when I tried to view the image, it returned white squared which means its base64 encoded image. Does it have to do with being empty file?

Answer 1

I had to use standard XMLHttpRequest to work it like below.

downloadFile() {

            var app = this;
            var url = baseRoute + 'files/' + this.fileId + '/download';
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url);
            xhr.setRequestHeader('Authorization', 'bearer ' + this.Authentication.tokenData().token);
            xhr.responseType = "arraybuffer";

            xhr.onload = function () {

                if (this.status === 200) {

                    var today = ((new Date()).toISOString()).slice(2,10),
                        filename = today.replace(/-/gi, "")+' '+ app.fileTitle;

                    var blob = new Blob([xhr.response], {type: xhr.getResponseHeader('content-type')});
                    var objectUrl = URL.createObjectURL(blob);

                    let link = document.createElement('a');
                    link.href = objectUrl;
                    link.download = filename;
                    link.click();
                    window.URL.revokeObjectURL(blob);
                }
            };
            xhr.send();
        },