Javascript 4 & Geoprocessing Service with File Upload

mdonnelly — Sat, 11 Dec 2021 17:42:50 GMT

Hello,

I have created a geoprocessing service, with upload enabled, that takes a file as a parameter. I am attempting to call this service from a web application created using Javascript 4.12, however, I have a problem.

The first problem happens when I use the esri request module to transact with the service's upload endpoint. The response will always be returned as html rather than JSON. If I nominate the responseType as "json" I get an error saying there was an unexpected character '<'. If I nominate the responseType as "text" the request succeeds but the response is in html.

        var gpUrl =  "https://myserver.com/arcgis/rest/services/ImportFileToGDB/GPServer/ImportFileToGDB";
        var fileUploadUrl =  "https://myserver.com/arcgis/rest/services/ImportFileToGDB/GPServer/uploads/upload";

        document
          .getElementById("uploadForm")
          .addEventListener("change", function(event) {
            var fileName = event.target.value.toLowerCase();

            if (fileName.indexOf(".zip") !== -1) {
              //is file a zip - if not notify user
              uploadFile(fileName);
            } else {
              document.getElementById("upload-status").innerHTML =
                'Add shapefile as .zip file';
            }
          });

          
        var gp = new Geoprocessor(gpUrl);

        var fileForm = document.getElementById("mainWindow");

        var expand = new Expand({
          expandIconClass: "esri-icon-upload",
          view: view,
          content: fileForm
        });

        view.ui.add(expand, "top-right");
          
        function uploadFile(fileName) {
            
            //upload the zip file and get back the itemID (via uploadSucceeded)
            var upload = esriRequest(
                fileUploadUrl,
                {
                    body: document.getElementById("uploadForm"),
                    method: "post",
                    responseType: "json"/*,
                    query:{f:"json"},
                    headers: {"Content-Type": "application/json"}*/
                }
            ).then(uploadSucceeded, errBack);

        }

        function uploadSucceeded(result) {
            
          document.getElementById("upload-status").innerHTML = "File uploaded"
          
          var itemID = result.item.itemId;
          //Create the DataFile object you will assign your itemID to
          var dataFile = new DataFile();
          //The itemID points to the zip file, which is why I assign it the dataFile object
          dataFile.itemID = itemID;
   
          var params = {
             "Import_File": dataFile
           };

          gp.submitJob(params).then(handleResult, errBack, progTest);
        }
          
        function progTest(value) {
          document.getElementById("upload-status").innerHTML = "Job status: " + "'" + value.jobStatus + "'";
          console.log(value.jobStatus);
        }
          
        function handleResult(result) {

            //Handle the querying, zooming and opening the FeatureForm
            document.getElementById("upload-status").innerHTML = "Success";
            console.log('here');
        }
          
        function errBack(error) {
          document.getElementById("upload-status").innerHTML = "Error: " + error;
          console.log("gp error: ", error);
        }
      });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Javascript 4 & Geoprocessing Service with File Upload

mdonnelly — Fri, 18 Oct 2019 00:17:08 GMT

Closing the loop on this one with a blog post I wrote here:

https://community.esri.com/people/MDonnellyesriaustralia-com-au-esridist/blog/2019/10/17/js-api-v4-uploading-a-file-to-a-gp-service

topic Javascript 4 & Geoprocessing Service with File Upload in ArcGIS JavaScript Maps SDK Questions

Javascript 4 & Geoprocessing Service with File Upload

Re: Javascript 4 & Geoprocessing Service with File Upload