How to download a file after AJAX call

Question

How can I automatically download a file after an AJAX call? Now my AJAX call is redirecting me to the resource, but not downloading the file.

this is my AJAX call:

$('.download').click(function (e) {
    e.preventDefault();
    let videoId = $('#video').data('video-id');
    $.ajax({
        url: "/video/" + videoId + "/download-link",
        type: "GET",
        success: function (response) {
            window.location = response.link;
        }
    });

});

And this is the html tag:

<a href="#" class="download">
     <i class="fas fa-long-arrow-alt-down"></i>Download
</a>

what you get after clicking on download link? – KUMAR Jun 13 '20 at 09:23 — KUMAR, Jun 13 '20 at 09:23
a redirect to the file url – Alex Granados Jun 13 '20 at 09:24 — Alex Granados, Jun 13 '20 at 09:24
php code returns an URL, there's nothing wrong there – Alex Granados Jun 13 '20 at 10:17 — Alex Granados, Jun 13 '20 at 10:17

score 1 · Answer 1 · answered Jun 13 '20 at 09:26

because you are redirecting it manually via window.location. There are multiple ways to download file if you have resource link. One of them is to use download attribute .( Also You can always try to search if same question exists already before posting it as new question). You can find detailed answer here : Download File Using Javascript/jQuery

score 0 · Answer 2 · answered Jun 13 '20 at 09:27

what you should do is make sure that the server responds with the following header for the file url

Content-Disposition: attachment; filename="file-name" // file name is not required, and can be ommitted
// This will make browsers understand that this is a downloadable resource

and then in your ajax do this

...
window.open(response.link, '_blank');

How to download a file after AJAX call

2 Answers2