ArcGIS API for Javascript : Class: esri/tasks/Geoprocessor - submitJob | getResultData

155
1
07-08-2021 07:50 AM
Bertrand_Laurancin
New Contributor

Hello,

I created a gp service that allows to load a csv file (It contains addresses and It is attached at this post).

It works as expected :

https://supad-t1-age1081.westus2.cloudapp.azure.com/server/rest/services/UploadFile/GPServer/uploads...

Bertrand_Laurancin_0-1625754620872.pngBertrand_Laurancin_1-1625754644735.png

I get an Item ID.

I created a gp service that allows to geocode addresses (from the Item ID generated at the step previous) :

https://supad-t1-age1081.westus2.cloudapp.azure.com/server/rest/services/BatchGeocode3/GPServer

Bertrand_Laurancin_2-1625754934564.png

It works as expected :

Bertrand_Laurancin_3-1625754996734.pngBertrand_Laurancin_4-1625755028564.pngBertrand_Laurancin_5-1625755065516.png

In a Web Application, I use the Geoprocessor class to execute the task :

https://codepen.io/blaurancin/pen/PomNEeK

 

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    Batch geocode from upload file
  </title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/dark/main.css" />
  <script src="https://js.arcgis.com/4.19/"></script>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/request", "esri/tasks/Geoprocessor"], (Map, MapView, esriRequest, Geoprocessor) => {
      const map = new Map({
        basemap: "dark-gray"
      });
      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 2,
        // center: [15, 65] // longitude, latitude
      });
      view.ui.move(["compass", "zoom"], "top-right");
      //
      const myForm = document.getElementById("uploadForm");
      //
      const ItemID = document.getElementById("ItemID");
      //
      const uploadStatus = document.getElementById("upload-status")
      //
      const fileUploadUrl = "https://supad-t1-age1081.westus2.cloudapp.azure.com/server/rest/services/UploadFile/GPServer/uploads/upload";
      //
      const gpUrl = "https://supad-t1-age1081.westus2.cloudapp.azure.com/server/rest/services/BatchGeocode3/GPServer/BatchGeocode3/submitJob";
      //
      const gp = new Geoprocessor(gpUrl);
      //
      myForm.addEventListener("change", function(event) {
        var fileName = event.target.value.toLowerCase();
        if (fileName.indexOf(".csv") !== -1) {
          console.log("fileName", fileName);
          uploadFile(fileName);
        } else {
          ItemID.innerHTML = "";
          ItemID.innerHTML = "It is not a csv file";
          uploadStatus.innerHTML = "";
        }
      });

      function uploadFile(fileName) {
        let name = fileName.split(".");
        // Chrome and IE add c:\fakepath to the value - we need to remove it
        // see this link for more info: http://davidwalsh.name/fakepath
        name = name[0].replace("c:\\fakepath\\", "");
        console.log("name", name);
        let upload = esriRequest(
          fileUploadUrl, {
            body: myForm,
            method: "post",
            responseType: "text" //Ideally would return as json but that doesn't seem to work for me
          }
        ).then(uploadSucceeded, errBackUplaod); //
      }

      function errBackUplaod(error) {
        console.log("upload: ", error);
      }

      function errBack(error) {
        uploadStatus.innerHTML = "";
        uploadStatus.innerHTML = "Error: " + error;
        console.log("gp error: ", error);
      }

      function progTest(value) {
        document.getElementById("upload-status").innerHTML = "Job status: " + "'" + value.jobStatus + "'";
        console.log(value.jobStatus);
      }

      function handleResult(result) {
        console.log("result.jobStatus", result.jobStatus);
        if (result.jobStatus == "job-failed") {
          for (let message of result.messages)
            console.log(message.description)
          return
        }
        uploadStatus.innerHTML = "";
        uploadStatus.innerHTML = result.jobStatus;
        console.log("jobID: " + result.jobId);
        gp.getResultData(result.jobId, "outFile").then(function(result) {
          console.log("result.dataType : " + result.dataType);
          console.log("result.value : " + result.value);
        });
      }

      function uploadSucceeded(result) {
        let element = document.createElement('html');
        let itemID = "";
        let itemURL = "";
        element.innerHTML = result.data;
        let tdElements = element.getElementsByTagName('td');
        for (let tdElement of tdElements) {
          if (tdElement.innerHTML == "Item ID:") {
            itemID = tdElement.nextElementSibling.firstChild.innerHTML;
          }
        }
        if (itemID == "") {
          console.log("Could not get file item id");
          return
        }
        console.log("itemID: " + itemID);
        let params = {
          my_addresses_csv: "{'itemID':'" + itemID + "'}" //Replaces the need for the DataFile object
        };
        console.log("params", params);
        let element2 = document.createElement("div");
        let text = document.createTextNode("{'itemID':'" + itemID + "'}");
        element2.appendChild(text);
        ItemID.innerHTML = "";
        ItemID.appendChild(element2);
        gp.submitJob(params).then(handleResult, errBack, progTest); // gp.submitJob(params).then(handleResult);  
        // gp.submitJob(params).then((jobInfo) => {
        //   const options = {
        //     statusCallback: (jobInfo1) => {
        //       progTest(jobInfo1);
        //     }
        //   };
        //   // once the job completes, add resulting layer to map
        //   gp.waitForJobCompletion(jobInfo.jobId, options).then((jobInfo2) => {
        //     handleResult(jobInfo2);
        //   });
        // });
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="myPanel">
    <p></p>
    <form enctype="multipart/form-data" method="post" id="uploadForm">
      <div class="field">
        <label class="file-upload">
          <span><strong>Add File</strong></span>
          <p></p>
          <input type="file" name="file" id="inFile" />
        </label>
      </div>
    </form>
    <p></p>
    <div id="ItemID"></div>
    <p></p>
    <div id="upload-status"></div>
  </div>

</body>

</html>

 

 

It works. The json output file is created on the server in \arcgisjobs\batchgeocode3_gpserver\<ID>\scratch:

Bertrand_Laurancin_6-1625755555236.png

Bertrand_Laurancin_7-1625755603160.png

 

However, I'm not able to get the result in the client-side (web app).

Bertrand_Laurancin_8-1625755700619.pngBertrand_Laurancin_9-1625755727575.png

I think I must use waitForJobCompletion() method but I tried unsuccessfully.

Could you help me please ?

Thank you,

Bertrand

 

Tags (2)
0 Kudos
1 Reply
XiaoyiZhang1
New Contributor

Following code works for me.

 

// upload file
var fileUploadUrl = gpserviceUrl + '/uploads/upload'
esri.request({
url: fileUploadUrl,
form: dojo.byId(uploadForm),
content: { f: "json" },
handleAs : "text",
},{usePost: true, useProxy:false}).then(uploadSucceeded, uploadFailed);

 

function uploadSucceeded(response){
var jsonObj = JSON.parse(response);

var status = jsonObj["success"];
if(status == true){
var item = jsonObj["item"];
var itemID = item["itemID"]
//console.log("itemID", itemID);

// gp process

var params = {'CSV_File': "{'itemID':'" + itemID + "'}", 'X_Field': xfield_value, 'Y_Field': yfield_value, 'Polygon_Data': polygon_data, 'statistics_type': statisticstype_value, 'statistics_field': statisticsfield_value};
console.log(params);

gp.submitJob(params, completeCallback, statusCallback);

} else {
$('#loadingDiv').css( "display", "none");
window.alert("Error: upload failed...");
}
}
function uploadFailed(response){
$('#loadingDiv').css( "display", "none");
alert('Upload failed: ', response);
}

0 Kudos