1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    peterson.ron is on a distinguished road

      0  

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

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


    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.



    Code:
    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')

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You can't. You either need to embed a hidden iframe or use window.open like you've suggested.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    peterson.ron is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      1  

    Default


    the legal way is to post the request to a script (eg php) and this script sends filecontent with file header.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    peterson.ron is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    use an iframe like this:

    PHP Code:
    Ext.Ajax.request ({
      
    url     'askfordownload',
      
    timeout 30 60 1000// 30 Minutes should be OK.
      
    scope   this,
      
    params  Ext.applyIf(paramsApp.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');
      }
    }); 
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  7. #7
    Sencha User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    Sheep is on a distinguished road

      0  

    Default


    Maybe this old trick still works:

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

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    27
    Vote Rating
    0
    dissectcode is on a distinguished road

      0  

    Default


    Quote Originally Posted by steffenk View Post
    use an iframe like this:

    PHP Code:
    Ext.Ajax.request ({
      
    url     'askfordownload',
      
    timeout 30 60 1000// 30 Minutes should be OK.
      
    scope   this,
      
    params  Ext.applyIf(paramsApp.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?

  9. #9
    Ext JS Premium Member anton.dimitrov's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    134
    Vote Rating
    5
    anton.dimitrov is on a distinguished road

      0  

    Default


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

    Code:
    /**
     * @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

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

    cheers