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); }
Solved! Go to Solution.
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>
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:
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>
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?
Did you use a proxy? Can you please post your code so that I can try it on my side?
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({
"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>
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!
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>