topic Minimally working sample for JSAPI using upload of a REST service though proxy in ArcGIS JavaScript Maps SDK Questions

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

MahdiKefayati — Tue, 14 Oct 2014 16:30:34 GMT

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

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

KellyHutchins — Tue, 14 Oct 2014 21:02:08 GMT

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

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

MahdiKefayati — Wed, 15 Oct 2014 21:01:50 GMT

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>

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

KellyHutchins — Wed, 15 Oct 2014 23:01:50 GMT

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?

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

MahdiKefayati — Thu, 16 Oct 2014 03:16:46 GMT

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

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

KellyHutchins — Thu, 16 Oct 2014 15:55:11 GMT

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/11591742/addAttachment",
              "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>

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

MahdiKefayati — Thu, 16 Oct 2014 17:29:02 GMT

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!

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

MahdiKefayati — Thu, 16 Oct 2014 19:51:42 GMT

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>