How to download a file using Ext.Ajax using a POST call?

[peterson.ron]

I'm a newby in Ext JS and I need to make a restful call that returns a file to the browser. How should I do this? This is what I have so far, the call is return but I can't get the file downloaded to the browser.

Ext.onReady(function () {

form = Ext.Ajax.request({
    url: 'http://localhost:8080/getfile',
    success: function(x){
                 return x; 
                 },
    failure: function () { console.log('failure');},
    params: {'someparams': Ext.encode ({'abc': {'hello': '123'}})
            }
    });
});

I could get it to work with a GET call using:

window.open('http://localhost:8080/getfile', 'Download')

[evant]

You can't. You either need to embed a hidden iframe or use window.open like you've suggested.

[peterson.ron]

I need to make a POST call so window.open will not work for me.

Would you please send me a sample how to call it with hidden iFrame?

[steffenk]

the legal way is to post the request to a script (eg php) and this script sends filecontent with file header.

[peterson.ron]

Yes, I am using this convention. I have a service returning headers "contnet-disposition as attachment and content-type as text".
And when I try directly from a URL I'm getting the correct pop-up dialog from the browser.

My QUESTION is how to do it from Ajax. How to make a POST call and have the browser pop-up the dialog "File Download" from the response?

[steffenk]

use an iframe like this:

Ext.Ajax.request ({
  url     : 'askfordownload',
  timeout : 30 * 60 * 1000, // 30 Minutes should be OK.
  scope   : this,
  params  : Ext.applyIf(params, App.config.baseParams),
  success : function (r) {
    var resp    = Ext.decode(r.responseText);
    Ext.DomHelper.append(Ext.getBody(), {
      tag:          'iframe',
      frameBorder:  0,
      width:        0,
      height:       0,
      css:          'display:none;visibility:hidden;height:0px;',
      src:          resp.downloadUrl
    });
  },
  failure: function(r) {
    alert('error');
  }
}); 

[Sheep]

Maybe this old trick still works:

http://www.sencha.com/forum/showthre...file-downloads

[dissectcode]

use an iframe like this:

Ext.Ajax.request ({
  url     : 'askfordownload',
  timeout : 30 * 60 * 1000, // 30 Minutes should be OK.
  scope   : this,
  params  : Ext.applyIf(params, App.config.baseParams),
  success : function (r) {
    var resp    = Ext.decode(r.responseText);
    Ext.DomHelper.append(Ext.getBody(), {
      tag:          'iframe',
      frameBorder:  0,
      width:        0,
      height:       0,
      css:          'display:none;visibility:hidden;height:0px;',
      src:          resp.downloadUrl
    });
  },
  failure: function(r) {
    alert('error');
  }
}); 

Hi - I know this is years later, but how do you specify the file that you are trying to download, in this example?

[anton.dimitrov]

a while ago I created a Downloader that handles error messages, maybe you could use it

/**
 * @class App.util.Downloader
 * @singleton
 *
 * @example
 * <pre>
 * App.util.Downloader.get({
 *      url: 'http://example.com/download?filename=test.txt',
 *      params: {
 *          param1: 'value1'
 *      }
 * });
 * </pre>
 *
 */
Ext.define('App.util.Downloader',{

    /**
     * Singleton class
     * @type {Boolean}
     */
    singleton: true,

    downloadFrame : null,

    downloadForm: null,

    /**
     * Get/Download from url
     * @param config
     */
    get: function (config){
        var me = this,
            body = Ext.getBody();
            config = config || {};

        /**
         * Support for String config as url
         */
        if(Ext.isString(config)){
            config = {
              url: config
            };
        }


        me.downloadFrame = body.createChild({
             tag: 'iframe',
             cls: 'x-hidden',
             id: 'app-upload-frame',
             name: 'uploadframe'
         });

        me.downloadForm = body.createChild({
             tag: 'form',
             cls: 'x-hidden',
             id: 'app-upload-form',
             target: config.target || 'app-upload-frame'
         });


        

        Ext.Ajax.request({
                url: config.url || '.',
                params: config.params || {},
                form: me.downloadForm,
                isUpload: true,
                scope: me,
                success: me.handleException,
                failure: me.handleException
            });
    },

    handleException: function(response,options){
        var me = this,
            result = Ext.decode(response.responseText,true);
         
        if(result){
            Ext.Msg.alert('Message',result['message']);
        }else{
            Ext.Msg.alert('Message',' An unknown Error occurred while downloading.');
        }
    }

});

just output the file to the user if everything is ok, or return

{success: false,message: 'Whatever ......'}

cheers