How to initiate a file download in Extjs 7.0 Modern framework

Question

In the Extjs classic framework we use Ext.form.Panel to initiate a file download. In the Modern framework I have been unable to get Ext.form.Panel to do the same. So how can I perform a simple file download (of a potentially large file) in the Modern framework. I would rather not have to change the server side code.

This is the code we use in Classic

params={};

params.doc_path=rec.get('server_path');
params.doc_link_name=rec.get('name');

var form = Ext.create('Ext.form.Panel', {
    standardSubmit: true,
    renderTo: Ext.getBody(),
    url: '/document/download',
    method: 'POST',
    timeout: 120
});


// Call the submit to begin the file download.
// Note that neither Success nor Failure are ever called
form.submit({
    params: params
});

This is the server side code in our ruby server

def download
    # A small helper to download the file passed in doc_path 
    send_file params["doc_path"],  type: 'application/octet-stream', disposition: 'attachment', filename: params["doc_link_name"]
end

If we try that in Modern our server does not receive the correct url. (We get a routing error). File upload using a form in Modern works just the same as Classic, so why doesn't the file download work the same?

Does anyone have some sample code on how to use Ext.exporter.file to download a file from a server? I have read the docs and just got lost. And in any case when I put in a require for Ext.exporter.file I get a 404 not found error, so that is out of the question.

score 0 · Answer 1 · answered May 05 '22 at 23:17

I just need click and forget so no need to track success or failure.

Thanks to Imagine-breaker for his answer in this post I implemented this function:

downloadURI: function(uri, name) {
        var link = document.createElement("a");
        if(!name)name="";
        link.setAttribute('download', name);
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        link.remove();
    }

and call it like this

    lfg.downloadURI('/document/download?doc_path=' + encodeURIComponent(rec.get('server_path')),rec.get('name'));

Server side code remains exactly as is. I might implement this in our Classic version of the app as well - it seems so much simpler.

How to initiate a file download in Extjs 7.0 Modern framework

1 Answers1