Use AJAX request to download file and handle errors in case the file is not found or cannot be downloaded

Question

Use AJAX request to download file and handle errors in case the file is not found or cannot be downloaded

Trying to implement an ajax request for downloading a file. Here's the code snippet:

const downloadFile = (element) => { 
    $.ajax({
        url: element.id,
        type: 'GET',  
        success: (result) => {
            window.location=element.id;
        },    
        error: (request,msg,error) => {
            alert(request.responseText);
        }
    })
} 

And the corresponding HTML element: 
'<td>' + `<a id=hiddenAPIRoute href="#" onclick="downloadFile(this)">Download</a>` + '</td>' +

Able to achieve download functionality, but facing double download issue. Prefer using ajax for improved error handling. While aware of html 5's download attribute, want to incorporate an alert in case the file is inaccessible.

javascript ajax download

Answer 1

Answer №1

To streamline your workflow, consider utilizing the fetch and URL.createObjectURL functions. It's recommended to relocate your API URL to the data-href attribute instead of using the id, which is typically reserved for other purposes:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a data-href="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" href="#"
        onclick="downloadFile(event)">Download</a>
    <script>

        const downloadFile = async e => {
            e.preventDefault();
            try {
                const response = await fetch(e.target.dataset.href);
                if (response.status !== 200) {
                    throw new Error(await response.text());
                }
                const blob = await response.blob();
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = e.target.dataset.href;
                document.body.appendChild(a);
                a.click();
                Promise.resolve().then(() => a.remove());
            } catch (e) {
                alert(e.message);
            }
        }



    </script>
</body>

</html>

Answer 2

To streamline your workflow, consider utilizing the fetch and URL.createObjectURL functions. It's recommended to relocate your API URL to the data-href attribute instead of using the id, which is typically reserved for other purposes:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a data-href="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" href="#"
        onclick="downloadFile(event)">Download</a>
    <script>

        const downloadFile = async e => {
            e.preventDefault();
            try {
                const response = await fetch(e.target.dataset.href);
                if (response.status !== 200) {
                    throw new Error(await response.text());
                }
                const blob = await response.blob();
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = e.target.dataset.href;
                document.body.appendChild(a);
                a.click();
                Promise.resolve().then(() => a.remove());
            } catch (e) {
                alert(e.message);
            }
        }



    </script>
</body>

</html>

Answer 3

Answer №2

When it comes to error handling, you have the flexibility to display error responses in any way you choose. Here's an example of how it can be done:

    error: function(xhr, status, error1) {
         var errorMessage = JSON.parse(xhr.responseText);
         console.log(errorMessage)
    }

Answer 4

When it comes to error handling, you have the flexibility to display error responses in any way you choose. Here's an example of how it can be done:

    error: function(xhr, status, error1) {
         var errorMessage = JSON.parse(xhr.responseText);
         console.log(errorMessage)
    }

Use AJAX request to download file and handle errors in case the file is not found or cannot be downloaded

Answer №1

Answer №2

Similar questions

Utilizing the content of an HTML element within Ruby embedded code - a comprehensive guide

Exploring JSON data to locate specific characters with JavaScript

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

What is the best way to send an HTTP request in AngularJS to receive data in JSON format?

Retrieve main page elements from an additional page called PageSlide

Establish a connection to couchDB using JavaScript on the server side

execute action once element has finished loading - angular

No value found for Req.file using the express-fileupload and multer libraries

How can I use jQuery UI to slide a div, while also smoothly moving the adjacent div to take its place?

Searching for partial nodes

Change the color of a specific day on the Arshaw Calendar using CSS

Getting the return value in JSP using JSP Ajax Servlet

The event failed to initiate

Retrieving specific data from nested arrays in Vue.js

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

Utilizing Typescript Generics in Arrow Function to Combine Two Arguments

I have to convert a JSON string that I received from a server into a particular JavaScript object

gulp.watch executes tasks without following a specific sequence

Avoid Refreshing the Page When Pressing the Like Button

Typescript double-sided dictionary: a comprehensive guide