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

Bertrand_Laurancin — Thu, 08 Jul 2021 14:50:32 GMT

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/upload

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

It works as expected :

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:

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

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

Could you help me please ?

Thank you,

Bertrand

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

XiaoyiZhang1 — Thu, 15 Jul 2021 19:05:56 GMT

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);
}

topic ArcGIS API for Javascript &colon; Class: esri/tasks/Geoprocessor - submitJob | getResultData in ArcGIS JavaScript Maps SDK Questions

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

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