Ajax - Knowing if file download was correctly sent from server

Question

I have an extjs ajax function that send a form to the server which returns a file to download with the correct Content-Disposition ="attachment; filename='test.zip'" header. The file can be downloaded with the normal file download window of the browser. However, the success callback function of the ajax request is not triggered and the ajax is pending indefinately waiting for a response.

Is there a way to tell the ajax function that the file was correctly sent from the server or not?

  exportLayer = function(node_id){
    Ext.Ajax.request({
      method: "GET",
      form: "exportForm",
      url: "/basqui/layer/shapefile/export/" + node_id + "/",
      success: function(r){
                  html = Ext.decode(r.responseText).html
                  Ext.get('pageContent').update(html);
                  },
    });
  }

if you just return the url itself you can simply do `window.location='path/to/download'` — charlietfl, Jul 04 '14 at 15:50
its a memory file, a zip created with data from database, not a file on server disk — Below the Radar, Jul 04 '14 at 15:50
the ajax is used to submit the form needed for the file creation — Below the Radar, Jul 04 '14 at 15:57
and why can't you just get the values and add them to the GET? ajax is not intended for file downloads. Or simply submit the form, browser won't redirect if it's a zipp output at server — charlietfl, Jul 04 '14 at 16:00
because if the form as errors, Ajax will return it with some error messages without reloading the page. AJAX can only handle json response as far as I know, but I cant return file and json in same time? — Below the Radar, Jul 04 '14 at 16:04
you could return json and a file as Base64 encoded data in json property, when you could process the file as you need. — babinik, Jul 04 '14 at 17:07

score 1 · Accepted Answer · answered Jul 04 '14 at 16:46

1

Set binary configuration property of Ext.Ajax.request and in the response you would get the binary data inside responseBytes property.

For example loading jpeg image:

Ext.Ajax.request({
      url: "/path/to/image/test.jpg",
      success: function(xhr) {
          var b64encoded = btoa(String.fromCharCode.apply(null, xhr.responseBytes));

          var img = Ext.create('Ext.Img', {
              src: 'data:application/jpeg;base64,' + b64encoded
          });
          // add image somewhere
          ...                
      }
 });

answered Jul 04 '14 at 16:46

babinik

646
3
10

not sure it would be efficient with large file, and how can I send it to the download application of the browser? – Below the Radar Jul 04 '14 at 18:16
1

returning json with validation results and file data base64 encoded would be inefficient for big files, but for small is works. How to download the binary data received via [xhr](http://stackoverflow.com/questions/13752984/html5-file-api-downloading-file-from-server-and-saving-it-in-sandbox), FileAPI and XHR2. But if you want to validate form and then download a file without FileAPI&XHR2 make it in 2 steps: 1. xhr validating the form and 2. receiving the validation results and and being sure all is correct inside the xhr response run the `window.location` dedicated to file download. – babinik Jul 04 '14 at 22:13
1

my answer mostly was about why your `Ext.Ajax.request` _is not triggered and the ajax is pending indefinately waiting for a response._ Cause request was made to receive the binary data but `binary` configuration option was missed. – babinik Jul 04 '14 at 22:18

Ajax - Knowing if file download was correctly sent from server

1 Answers1