Minimally working sample for JSAPI using upload of a REST service though proxy

MahdiKefayati · ‎10-14-2014

Has anyone successfully used the file upload of ArcGIS's REST API using their JS API though a proxy? I have used all the samples and read through esri.request documentation and still cannot get it working.

Here is quick look at my file uploader code:

function uploadFile( svcName, form , uploadSucceeded, uploadFailed){     gpUploadURL = "http://"+gisServer+":6080/arcgis/rest/services/"+svcName+"/GPServer/uploads/upload";      console.log('Uploading file...', gpUploadURL);     esri.request({         url: gpUploadURL,           form: dojo.byId(form),          //callbackParamName: "callback",         //content: { f: "jsonp" },         handleAs : "json",      }/*,{usePost: true, useProxy:true}*/).then(uploadSucceeded, uploadFailed); }

MahdiKefayati · ‎10-16-2014

Just for the record, here is the final code that works:

somewhere in a function I have:

uploadFile( 'importBillingFile', 'importBillingFileForm' , uploadSucceeded, uploadFailed);

where `'importBillingFile` is the name of the GP service to which file is being uploaded and:

function uploadFile( svcName, form , uploadSucceeded, uploadFailed){
    gpUploadURL = "http://"+gisServer+":6080/arcgis/rest/services/"+svcName+"/GPServer/uploads/upload";
    console.log('Uploading file...', gpUploadURL);
    esri.request({
        url: gpUploadURL,
        form: dojo.byId(form),
        content: { f: "json" },
        handleAs : "json",
    },{usePost: true, useProxy:true}).then(uploadSucceeded, uploadFailed);
}
function uploadSucceeded(response){
        billingFileItemId= response["item"].itemID;
        registry.byId('ibfok').set("disabled", false);
        console.log('File uploaded successfully, item ID:', billingFileItemId);
}
function uploadFailed(response){
    console.log('Upload failed: ', response);
}

and the HTML part:

<form id="importBillingFileForm" style='padding:4px;' method="post" enctype="multipart/form-data" onchange="importBillingFile();">  
<input type="file" name="file" id="inFile" size="50" />  
</form>

View solution in original post

KellyHutchins · ‎10-14-2014

Do you have the HTML form with file input setup correctly? There's an example of this in the Upload a file section of this help topic:

Retrieve data from a web server | Guide | ArcGIS API for JavaScript

We also have a sample that show how to upload a shapefile that might help:

Add shapefile | ArcGIS API for JavaScript

MahdiKefayati · ‎10-15-2014

Thanks for the links, I have seen and read the first one already and the second one seems to be different from the simple thing I want to do and it is working with ArcGIS online. I can get it working without using proxy. Here is the working code I have:

somewhere in a function I have:

uploadFile( 'importBillingFile', 'importBillingFileForm' , uploadSucceeded, uploadFailed);

where `'importBillingFile` is the name of the GP service to which file is being uploaded and:

function uploadFile( svcName, form , uploadSucceeded, uploadFailed){
    gpUploadURL = "http://"+gisServer+":6080/arcgis/rest/services/"+svcName+"/GPServer/uploads/upload";
    console.log('Uploading file...', gpUploadURL);
    esri.request({
        url: gpUploadURL,
        form: dojo.byId(form),
        content: { f: "json" },
        handleAs : "json",
    },{usePost: true, useProxy:false}).then(uploadSucceeded, uploadFailed);
}
function uploadSucceeded(response){
        billingFileItemId= response["item"].itemID;
        registry.byId('ibfok').set("disabled", false);
        console.log('File uploaded successfully, item ID:', billingFileItemId);
}
function uploadFailed(response){
    console.log('Upload failed: ', response);
}

and the HTML part:

<form id="importBillingFileForm" style='padding:4px;' method="post" enctype="multipart/form-data" onchange="importBillingFile();">  
<input type="file" name="file" id="inFile" size="50" />  
</form>

KellyHutchins · ‎10-15-2014

I created a quick test page that adds attachments to an arcgis server service and was able to do so successfully using the proxy. Do you see any errors in the developer console?

MahdiKefayati · ‎10-15-2014

Did you use a proxy? Can you please post your code so that I can try it on my side?

KellyHutchins · ‎10-16-2014

I did use a proxy. My sample code is slightly different than your use case because I'm using addAttachment but here's the code:

<!DOCTYPE html>
<html>
<head>
  <title>JSON Content</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
  <style>
    body{
      font-family: "Arial Unicode MS, Arial, sans-serif";
    }
    #content {
      width: 800px; height: 350px; padding: 5px; overflow: auto;
      border: solid 2px #AAAAAA; background-color: #FFFFFF;
      -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
      -moz-box-shadow: 0 0 0.5em black; -webkit-box-shadow: 0 0 0.5em black; -o-box-shadow: 0 0 0.5em black; box-shadow: 0 0 0.5em black;
    }
    .failure { color: red; }
    #status { font-size: 12px; }
  </style>
  
  <script src="http://js.arcgis.com/3.11/"></script>
  <script>
    require(["dojo/dom", "dojo/on", "dojo/dom-class", "dojo/_base/json",  "esri/urlUtils", "esri/config", "esri/request", "dojo/domReady!"], function(dom, on, domClass, dojoJson, urlUtils, esriConfig, esriRequest) {


        esriConfig.defaults.io.proxyUrl = "http://localhost/resource_proxy/proxy.php";
        on(dom.byId("uploadForm"), "change", function (event) {


            var upload = esriRequest({
              "url": "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0...",
              "form": document.getElementById("uploadForm"),
              "content": {f:"json"},
              "handleAs": "json"
            });
            upload.then(requestSucceeded, requestFailed);


            function requestSucceeded(result){
              console.log("Success");
              console.log(result);
            }
         
            function requestFailed (result){
              console.log("Failed");
              console.log(result);
            }






        });










    });
  </script>


</head>
<body>
  <form id="uploadForm" method="post" enctype="multipart/form-data">
     <input type="file" name="attachment" />
   </form>
</body>
</html>

MahdiKefayati · ‎10-16-2014

That is very interesting, your code is exactly the same as mine.

I just changed `useProxy:true` and now it works perfectly. I cannot tell what has corrected it though b/c I have done a lot of things since when I started working on it (including changing my JSAPI version to 3.11) but what ever has happened, I can see things going through the proxy now without any issues. Maybe that is the `content` parameter which I think was set as jsonp before…

Anyways, thanks a lot for the help!

MahdiKefayati · ‎10-16-2014

Just for the record, here is the final code that works:

somewhere in a function I have:

uploadFile( 'importBillingFile', 'importBillingFileForm' , uploadSucceeded, uploadFailed);

where `'importBillingFile` is the name of the GP service to which file is being uploaded and:

function uploadFile( svcName, form , uploadSucceeded, uploadFailed){
    gpUploadURL = "http://"+gisServer+":6080/arcgis/rest/services/"+svcName+"/GPServer/uploads/upload";
    console.log('Uploading file...', gpUploadURL);
    esri.request({
        url: gpUploadURL,
        form: dojo.byId(form),
        content: { f: "json" },
        handleAs : "json",
    },{usePost: true, useProxy:true}).then(uploadSucceeded, uploadFailed);
}
function uploadSucceeded(response){
        billingFileItemId= response["item"].itemID;
        registry.byId('ibfok').set("disabled", false);
        console.log('File uploaded successfully, item ID:', billingFileItemId);
}
function uploadFailed(response){
    console.log('Upload failed: ', response);
}

and the HTML part:

<form id="importBillingFileForm" style='padding:4px;' method="post" enctype="multipart/form-data" onchange="importBillingFile();">  
<input type="file" name="file" id="inFile" size="50" />  
</form>