How to handle a multiple files response from a Ajax POST request?

Question

I'm using the OGRE web client to transform GeoJSON text data to ESRI shapefiles. To do it, I'm using a POST request with Ajax.

var data = { "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": { "type": "Point", "coordinates": [102.0, 0.5] },
    "properties": { "prop0": "value0" }
  }]
};

function sendPost() {
    $.ajax({
        type: "POST",
        url: 'http://ogre.adc4gis.com/convertJson',
        data: {json:JSON.stringify(data)},
        success: success
    });
}

The response from the POST request is multiple files (see image):

How can I handle this kind of response ? I want to add the files to a ZIP file and download it. I think I can do it by using the JSZip and FileSaver librairies. It should be something like that but I don't know how to handle the response:

function success(result) {
    console.log(result);

    var zip = new JSZip();
    zip.file = ("file1.shp", result[--file1 in the response--])

    var content = zip.generate({type:"blob"});

    saveAs(content, "test.zip")
}

Need some help !! :)

Edit: Trying with a XHR request, I can't seem to find how to correctly pass the JSON as text in the URL so that the URL works:

params = {
    json: JSON.stringify(data)
}

function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+params[key]
        })
        .join("&")
}

var url_long = "http://ogre.adc4gis.com/convertJson";
var url = url_long + "?" + formatParams(params);

score 1 · Accepted Answer · edited May 23 '17 at 10:32

It looks like the result is already a zip file. If you just want to trigger the download, you just need FileSaver. The only thing you need is to get a binary content. Without further configuration, $.ajax will try decode the content as UTF8 and corrupt the content. Getting a Blob (or a Uint8Array) here is what you need. From this question, you may need to use a raw XHR request.

If you want to filter the content of the zip file, that won't be

var zip = new JSZip();
zip.file("file1.shp", result[--file1 in the response--])

but rather

var zip = new JSZip(result);
// keep file1, remove file2, etc
zip.remove("file2.shp")

Edit: here is how to POST the json with an XMLHttpRequest:

var formData = new FormData();
formData.append('json', JSON.stringify(data));

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ogre.adc4gis.com/convertJson");
xhr.responseType = "arraybuffer"; // ask for a binary result
xhr.onreadystatechange = function(evt) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var zip = new JSZip(xhr.response);
      console.log("success, got", Object.keys(zip.files));
    } else {
      console.log("http call error");
    }
  }
};

xhr.send(formData);

Which display success, got Array [ "OGRGeoJSON.dbf", "OGRGeoJSON.prj", "OGRGeoJSON.shp", "OGRGeoJSON.shx" ]

Thanks for your answer. How do you propose to pass the JSON text in the XHR ? I've been searching and can't find how to correctly pass the json so that the URL works. I edited the main post. — kaycee, Feb 22 '16 at 14:41
You can use `FormData` and `formData.append('json', JSON.stringify(data));` to send your json, I'll edit my answer with the code. — David Duponchel, Feb 22 '16 at 20:42

How to handle a multiple files response from a Ajax POST request?

1 Answers1