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

5452
7
Jump to solution
10-14-2014 09:30 AM
MahdiKefayati
New Contributor II

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); }  
Tags (3)
0 Kudos
1 Solution

Accepted Solutions
MahdiKefayati
New Contributor II

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

0 Kudos
7 Replies
KellyHutchins
Esri Frequent Contributor

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

0 Kudos
MahdiKefayati
New Contributor II

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>

0 Kudos
KellyHutchins
Esri Frequent Contributor

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?

0 Kudos
MahdiKefayati
New Contributor II

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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>

0 Kudos
MahdiKefayati
New Contributor II

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!

0 Kudos
MahdiKefayati
New Contributor II

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>

0 Kudos