file download with XMLHttpRequest

Question

I am having a hard time implementing a simple file download script.
This is what I have so far, working ok :

• Open an XMLHttpRequest
• Get remote file as blob binary
• Show download progress

My problem is :

• creating a custom download directory
• renaming downloaded file as original source name
• downloaded file does not include its extension
• Possibility to add the option to prompt a save as location before download ?

This is the snippet :

    $('#DownloadBtn').click(function(e) {

        e.preventDefault();

        var urlFile = $(this).attr('href'); // remote file www.blabla.com/soft123.bin
        var fileName = ''; // Get remote file name & extension ?

        var progressBar = document.querySelector('progress');

        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

        function onError(e) {
            console.log('Error', e);
        }

        var xhr = new XMLHttpRequest();
        xhr.addEventListener("progress", updateProgress, false);
        xhr.open('GET', urlFile, true);
        xhr.responseType = 'blob';
        var resourceDIRLOC = "Downloads";
        xhr.onload = function(e) {
            window.requestFileSystem(TEMPORARY, 10 * 1024 * 1024, function(fs) {
                fs.root.getDirectory(fs.root.fullPath + '/' + resourceDIRLOC, {
                    create: true
                }, function(dir) {
                    resourceDIR = dir;
                    fs.root.getFile(fileName, {
                        create: true
                    }, function(fileEntry) {
                        fileEntry.createWriter(function(writer) {
                            writer.onwrite = function(e) {};
                            writer.onerror = function(e) {};
                            var blob = new Blob([xhr.response], {
                                type: ' application/octet-stream'
                            });

                            writer.write(blob);
                        }, onError);
                    }, onError);
                }, onError);
            }, onError);
        };

        function updateProgress(e) {
            if (e.lengthComputable) {
                $(progressBar).show();
                var i = (e.loaded / e.total) * 100;
                progressBar.value = i;
                if (i == 100) {
                    $(progressBar).hide();
                }
            }
        }
        xhr.send();
    });

The downloaded file is located under FileSystem->000->t with 00 as name ( not soft123.bin )

I am not sure if it is possible to give the user an option to choose a download directory outside FileSystem? As defined above, target directory resourceDIRLOC = "Downloads" but the request is not creating this folder ? neither giving the file a name and extension
Any advise is appreciated
Thanks

Answer 1

Here is how you can keep track download progress and choose download directory in with Node-Webki. I was at first trying to download using an XMLHttpRequest in order to monitor download progress but I was having difficulties with the FileSystem API. This did the job just as I wanted, a simple file download with a progress bar. Hope it is helpful.

function download(file_url) {
    var fs = require('fs');
    var url = require('url');
    var http = require('http');
    var options = {
        host: url.parse(file_url).host,
        port: 80,
        path: url.parse(file_url).pathname
    };
    var file_name = url.parse(file_url).pathname.split('/').pop();
    var file = fs.createWriteStream('./' + file_name);
    http.get(options, function(res) {
        var fsize = res.headers['content-length'];
        res.on('data', function(data) {
            file.write(data);
            progress(100 - (((fsize - file.bytesWritten) / fsize) * 100), $('#progressBar'));
        }).on('end', function() {
            file.end();
        });
    });
}

function progress(percent, $element) {
    console.log("Download: " + parseInt(percent) + " %")
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').css("width", progressBarWidth);
}

Answer found here