ArcGIS API for Javascript : Class: esri/tasks/Geoprocessor - submitJob | getResultData
714
1
07-08-2021 07:50 AM
by
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 :
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
by
