Latest Contributions by mdonnelly

Hello, Recently I needed to upload a file to a geoprocessing service using the ArcGIS JavaScript API V4 but had trouble finding a concise road map on how to achieve this. After knocking my knees on the undergrowth I am writing this blog post so you can travel the road in comfort. I note that others have provided information for this using v3 of the API but there are some differences that this post explores relating to v4. The Problem: Need to upload a file to a geoprocessing service Using the ArcGIS JavaScript API v4 on the client The Solution Overview: Create a geoprocessing tool that takes a file as a parameter Publish the tool as a geoprocessing service with the option to Upload enabled In the JS code have a way of prompting the user to upload a file using a document form Create a request to the Upload endpoint of the geoprocessing service, whose body is the contents of the form An item ID will be returned from the request. This ID is then passed as the file parameter to the geoprocessing service job The geoprocessing service reads the ID from the file parameter and automatically translates that to the path to the uploaded file location Solution Details Python: There isn't anything special from the Python side of things. Simply grab the file parameter as text: file_path = arcpy.GetParameterAsText(0)   The parameter will be a string that represents the path to the file. Once you have the path to the file you can manipulate the file as required for your purposes. Geoprocessing Tool: Create a geoprocessing tool in ArcMap or ArcPro with a parameter for a file with a data type of 'File'. Matching the order of the parameter in the tool with the parameter index in the Python script is essential. If the file parameter is first in the toolbox list then this parameter has an index of zero in the Python parameter list. This translates to the following in Python: arcpy.GetParameterAsText(0) Geoprocessing Service: Run the tool in ArcMap or ArcPro so that it completes successfully. In ArcMap, go to Geoprocessing Results, right click on the successful job and select Share As > Geoprocessing Service In ArcPro, go to History, right click on the successful job and select Share As > Web Tool To enable Upload capability: ArcMap: In the service editor, under the Parameters section, tick the Upload box ArcPro: In the share as web tool dialog, in the Configuration tab, tick the Upload box Check the tool parameters are correct and add descriptions. Publish the tool, which now has the ability to upload files. JavaScript & HTML 1. Use a document form to allow the user to nominate a file for upload: <form enctype="multipart/form-data" method="post" id="uploadForm">    <div class="field">       <label class="file-upload">          <span><strong>Add File</strong></span>          <input type="file" name="file" id="inFile" />       </label>    </div> </form> 2. Create a request to the geoprocessing service upload endpoint, that uses the form as the body: 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);   } } }); function uploadFile(fileName) {    var 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\\", "");    var upload = esriRequest(       fileUploadUrl,       {          body: document.getElementById("uploadForm"),          method: "post",          responseType: "text" //Ideally would return as json but that doesn't seem to work for me       }          ).then(uploadSucceeded, errBack); } 3. Handle the response of the request and extract the item ID, passing it as a parameter to the geoprocessing service: function uploadSucceeded(result) { //Ideally the result would come back as json but as it is coming back as html it will need to be parsed for the itemid var element = document.createElement('html'); var itemID = ""; var itemURL = ""; element.innerHTML = result.data; var 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)  var params = {    FileName: "{'itemID':'" + itemID + "'}" //Replaces the need for the DataFile object }; gp.submitJob(params).then(handleResult, errBack, progTest); } Note that the JS API documentation recommends that you create a DataFile object, which you then pass as the parameter value. I could not get that to work and so constructed the object from JSON myself based on what I could see the geoprocessing service required. I determined the format of the JSON object by executing the geoprocessing service from the REST endpoint. I have attached my full sample JS code for reference. This code not only uploads a file but also gets a response in the form of an object id of the uploaded feature. The feature is zoomed to and then a FeatureForm for that feature is opened for editing.  One caveat is that at the time of writing I could not get the update button to work on the FeatureForm, probably due to an unresolved asych issue. ... View more

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); } }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more