Using JS API 4.9 and esriRequest to upload a KML file to a geoprocessing service

02-22-2019 10:46 AM
Regular Contributor

Using v4.9 of JS API, trying to upload a KML or KMZ to a geoprocessing service that has uploads enabled. 

Struggling on how to format my esriRequest:

Here is what I have:

 body: document.getElementById("uploadForm"),
 method: 'post',
 responseType: 'json',
 //headers: {'Content-Type': 'multipart/form-data'},

 I've tried a lot of different combinations of headers, my proxy is working, but I keep getting errors like


Unexpected token < in JSON at position x (where x is a number) with no headers

Error parsing multi-part request with multipart/form-data headers

Error performing upload operation with application/x-www-form-urlencoded headers


Unable to load… an error in handleAs: transformation of response with any headers. 

Any ideas here? 

0 Kudos
2 Replies
Regular Contributor

Turns out if I look at the response, the upload is working, it's just returning it in html instead of json.....

Sooo, how do I format esri request to make sure json is returned....

If I look at the request in my developer tab, it shows:

0 Kudos
Regular Contributor

UPDATE: I think esriRequest in 4.9 doesn't currently work for a geoprocessing service upload endpoint (it works in 3.x though).  Adding query: {"f":"json"} to the esriRequest options appends the parameter to the url a la GET query parameters, even while it POSTs the form data (in my case the binary file).  However, the geoprocessing service upload endpoint doesn't accept these GET parameters.  So there are two ways to deal with it

1. Use responseType: xml in the esriRequest options and parse the resultant html page with regex. 

2. I added <input type="hidden" name="f" value="json"/> to my form to shoehorn the parameter into the POST request

So my final form html looks like 

<form enctype="multipart/form-data" method="post" id="uploadForm" ref="myelement">
 <span class="btn btn-primary">
 <input type="file" name="file" id="file" accept=".kmz, .kml" @change="handleFile">
 <input type="hidden" name="f" value="json"/>

and my final EsriRequest is

   body: dom.byId("uploadForm"),
   responseType: 'json'
}).then(successHandler, errorHandler);

This was the ONLY way I could get the service to return JSON....

If anyone has solved this another way, please let me know, because it seems like a bug in the 4.x version of the API when communicating with this particular type of rest endpoint and uploading a file...