Identify and alert when the download has finished

Question

Identify and alert when the download has finished

Imagine having a drive link to download a zip file. Upon clicking the link, the download begins in the browser. After the download finishes, I would like to send an email notification to the user. Is this achievable? I am using a .NET application (C#) with a page displaying all the drive links. As soon as a drive link is clicked and fully downloaded, I wish to trigger the sending of an email. Additionally, if the download were to fail halfway through, I want to notify the user via email. Can this be done?

javascript c#.net ajax asp.net-mvc

Answer 1

Answer №1

I have made updates to the code snippet below. Please add a valid download URL link and test it out.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        <style type="text/css">
            .event-log {
    width: 25rem;
    height: 4rem;
    border: 1px solid black;
    margin: .5rem;
    padding: .2rem;
}

input {
    width: 11rem;
    margin: .5rem;
}

        </style>
        
        <title>XMLHttpRequest: progress event - Live_example - updated code sample</title>
    </head>
    <body>
        
            <div class="controls">
    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
        
        
            <script>
                const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');

function handleEvent(e) {
if (e.type=='progress')
{log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred Received ${event.loaded} of ${event.total}\n`;
    }
else if (e.type=='loadstart')
{
log.textContent = log.textContent + `${e.type}: started\n`;
}
else if  (e.type=='error')
{
log.textContent = log.textContent + `${e.type}: error\n`;
}
else if (e.type=='loadend')
{
log.textContent = log.textContent + `${e.type}: completed\n`;
}

}

function addListeners(xhr) {
    xhr.addEventListener('loadstart', handleEvent);
    xhr.addEventListener('load', handleEvent);
    xhr.addEventListener('loadend', handleEvent);
    xhr.addEventListener('progress', handleEvent);
    xhr.addEventListener('error', handleEvent);
    xhr.addEventListener('abort', handleEvent);
}

function runXHR(url) {
    log.textContent = '';

    const xhr = new XMLHttpRequest();
    
   var request = new XMLHttpRequest();
   addListeners(request);
        request.open('GET', url, true);
        request.responseType = 'blob';
        request.onload = function (e) {
        var data = request.response;
        var blobUrl = window.URL.createObjectURL(data);
        var downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download ='download.zip';
        downloadLink.click();
        };
        request.send();
        return request
}

xhrButtonSuccess.addEventListener('click', () => {
    runXHR('https://example.com/download.zip');
});

xhrButtonError.addEventListener('click', () => {
    runXHR('http://i-dont-exist');
});

xhrButtonAbort.addEventListener('click', () => {
    runXHR('https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json').abort();
});
            </script>
        
    </body>
</html>

This updated code includes functionality for downloading zip files as well.

Reference:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event#live_example

Answer 2

I have made updates to the code snippet below. Please add a valid download URL link and test it out.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        <style type="text/css">
            .event-log {
    width: 25rem;
    height: 4rem;
    border: 1px solid black;
    margin: .5rem;
    padding: .2rem;
}

input {
    width: 11rem;
    margin: .5rem;
}

        </style>
        
        <title>XMLHttpRequest: progress event - Live_example - updated code sample</title>
    </head>
    <body>
        
            <div class="controls">
    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>
        
        
            <script>
                const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');

function handleEvent(e) {
if (e.type=='progress')
{log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred Received ${event.loaded} of ${event.total}\n`;
    }
else if (e.type=='loadstart')
{
log.textContent = log.textContent + `${e.type}: started\n`;
}
else if  (e.type=='error')
{
log.textContent = log.textContent + `${e.type}: error\n`;
}
else if (e.type=='loadend')
{
log.textContent = log.textContent + `${e.type}: completed\n`;
}

}

function addListeners(xhr) {
    xhr.addEventListener('loadstart', handleEvent);
    xhr.addEventListener('load', handleEvent);
    xhr.addEventListener('loadend', handleEvent);
    xhr.addEventListener('progress', handleEvent);
    xhr.addEventListener('error', handleEvent);
    xhr.addEventListener('abort', handleEvent);
}

function runXHR(url) {
    log.textContent = '';

    const xhr = new XMLHttpRequest();
    
   var request = new XMLHttpRequest();
   addListeners(request);
        request.open('GET', url, true);
        request.responseType = 'blob';
        request.onload = function (e) {
        var data = request.response;
        var blobUrl = window.URL.createObjectURL(data);
        var downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download ='download.zip';
        downloadLink.click();
        };
        request.send();
        return request
}

xhrButtonSuccess.addEventListener('click', () => {
    runXHR('https://example.com/download.zip');
});

xhrButtonError.addEventListener('click', () => {
    runXHR('http://i-dont-exist');
});

xhrButtonAbort.addEventListener('click', () => {
    runXHR('https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json').abort();
});
            </script>
        
    </body>
</html>

This updated code includes functionality for downloading zip files as well.

Reference:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event#live_example

Identify and alert when the download has finished

Answer №1

Similar questions

The dilemma between installing Electron or installing Electron-Builder: which one

Having trouble with Express router behaving unexpectedly in a subdirectory

Enhancing Efficiency with Laravel 5: Updating Multiple Data Entries

Having trouble getting jQuery click event to work with Express for loading a Handlebars page

What steps can I take to resolve the issue of item display in the dropdown menu?

What steps do I need to take to create a delete button that will effectively remove a bookmark from an array?

What is the proper way to invoke GetMethod on a generic function with a generic parameter without resorting to the use of GetMethods()?

The onchange event does not seem to be functioning as expected in a dropdown menu that was dynamically added from a separate

Is it possible for the JavaScript DOM API to retrieve the exact casing of attribute and tag names?

Spinning Wheel with Ajax in jQuery Mobile

Encountering a problem with vis js events

Troubleshooting a JavaScript Error in AngularJS Module

finding the node version in a code repository

Navigating rows in a Kendo Grid using buttons (Starting, Previous, Next, Ending)

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

End your Idp session and log out using passport-saml

jQuery ajaxSetup: handling error retries for ajax calls is not possible

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

How to locate and extract specific data from a webpage table using JavaScript and Node.js for web scraping and storing in an array of objects

What is the reason that this jQuery code is exclusive to Firefox?