FeatureLayer.AddAttachment() does not work properly

ThomasLaue · ‎11-14-2012

Hello,

I am currently working on a mobile solution using JQuery Mobile and ArcGIS JavaScript API. I have been developing my own attribute editor as the default ESRI attribute and attachment editor widgets do not match to our style guides. Everything is working so far apart from the attachment handling.

I have been trying adding attachments (mainly images) using the following piece of code:

if (featureayer.isEditable && featureayer.hasAttachments) {      featureayer.addAttachment(selectedFeatureObjectID, document.getElementById("addImageForm"), function (result) {                        ...     },     function (error) {                        ...     });

My application is trying to post the selected image to my local server and I can see the following post request payload using the Chrome developer tools:

------WebKitFormBoundaryqLUYc2Wu8g9s28A1
Content-Disposition: form-data; name="inputFile"; filename="images.jpeg"
Content-Type: image/jpeg

------WebKitFormBoundaryqLUYc2Wu8g9s28A1
Content-Disposition: form-data; name="token"

B8rm1jrQR_Vh0VMZQ1EJ17IXpM284A3C3VmJHvoQC5w19hU5UwuU5TKseEAZTWP8NgaOOjV_4kJRJajyfKtCRw..
------WebKitFormBoundaryqLUYc2Wu8g9s28A1
Content-Disposition: form-data; name="f"

json
------WebKitFormBoundaryqLUYc2Wu8g9s28A1--

However it is always getting back with an error message:

Error: Error performing add attachment operation
Code: 500

Unfortunately, I have no idea what might be the reason of this problem. I can add attachments using ArcGIS Desktop and the ArcGIS Server Rest API via Browser so that I am assuming that this is not a issue with my feature service.

Thank you very much for any hint! Best regards

Thomas

ShreyasVakil · ‎11-14-2012

Check out this code sample which demonstrates adding attachments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=0.5, maximum-scale=1,user-scalable=no"/>     <title>Test Add Attachment</title>          <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">     <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->  <script type="text/javascript">       var djConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>     <script type="text/javascript">       dojo.require("esri.map");    dojo.require("esri.layers.FeatureLayer");    dojo.require("dijit.form.TextBox");    dojo.require("dijit.form.DateTextBox");    dojo.require("dijit.form.TimeTextBox");    dojo.require("dijit.form.MultiSelect");    dojo.require("dijit.ProgressBar");    dojo.require("dojo.parser");    dojo.require("dojo.data.ItemFileReadStore");    dojo.require("dijit.form.ComboBox");      var featureLayer, map,  maxExtent,customExtentAndSR, tiledMapServiceLayer;    //This function loads the map     function init()   {       esri.config.defaults.io.proxyUrl = "http://svakil/JSProxyPage/proxy.ashx";   esri.config.defaults.io.alwaysUseProxy = false;   customExtentAndSR = new esri.geometry.Extent(-14091875,5638085,-12763165,6396109, new esri.SpatialReference({"wkid":3857}));   map = new esri.Map("map");            dojo.connect(map, "onLoad", function() {          maxExtent = map.extent;      dojo.connect(map, "onClick", function(evt){     console.log(evt);     map.graphics.clear();     map.graphics.add(new esri.Graphic(evt.mapPoint,  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 25,     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,     new dojo.Color([255,0,0]), 4))));     submitForm();    });   });   var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");   var featureServiceURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0";          featureLayer = new esri.layers.FeatureLayer(featureServiceURL, {       outFields: ["*"],       visible: false       });                  map.addLayers([tiledMapServiceLayer, featureLayer]);            }         function submitForm() {   featureLayer.addAttachment(5176728, document.getElementById("myForm6") ,callback , function(err){console.log(err);});  }     function callback(result){   console.log(result);  }  dojo.addOnLoad(init);  </script>     <body class="claro">  <div id="map" style="position:relative; width:600px; height:400px; border:1px solid #000; margin:0px auto;"></div>   <form id="myForm6"><input type="file" name="attachment"/></form> </body> </html>

In order to successfully add an attachment the formNode form must contain an input item with a 'name' attribute set to the term "attachment". Below is the bare bones HTML Form which allows for successful attachments. If the name element is not tagged with the input the application with throw a "processing error" with error code 500 in firebug.

<form id="myForm1"><input type="file" name="attachment"/></form>

Let me know if it works.

Thanks,
Shreyas

View solution in original post

ShreyasVakil · ‎11-14-2012

Check out this code sample which demonstrates adding attachments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=0.5, maximum-scale=1,user-scalable=no"/>     <title>Test Add Attachment</title>          <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">     <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->  <script type="text/javascript">       var djConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>     <script type="text/javascript">       dojo.require("esri.map");    dojo.require("esri.layers.FeatureLayer");    dojo.require("dijit.form.TextBox");    dojo.require("dijit.form.DateTextBox");    dojo.require("dijit.form.TimeTextBox");    dojo.require("dijit.form.MultiSelect");    dojo.require("dijit.ProgressBar");    dojo.require("dojo.parser");    dojo.require("dojo.data.ItemFileReadStore");    dojo.require("dijit.form.ComboBox");      var featureLayer, map,  maxExtent,customExtentAndSR, tiledMapServiceLayer;    //This function loads the map     function init()   {       esri.config.defaults.io.proxyUrl = "http://svakil/JSProxyPage/proxy.ashx";   esri.config.defaults.io.alwaysUseProxy = false;   customExtentAndSR = new esri.geometry.Extent(-14091875,5638085,-12763165,6396109, new esri.SpatialReference({"wkid":3857}));   map = new esri.Map("map");            dojo.connect(map, "onLoad", function() {          maxExtent = map.extent;      dojo.connect(map, "onClick", function(evt){     console.log(evt);     map.graphics.clear();     map.graphics.add(new esri.Graphic(evt.mapPoint,  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 25,     new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,     new dojo.Color([255,0,0]), 4))));     submitForm();    });   });   var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");   var featureServiceURL = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0";          featureLayer = new esri.layers.FeatureLayer(featureServiceURL, {       outFields: ["*"],       visible: false       });                  map.addLayers([tiledMapServiceLayer, featureLayer]);            }         function submitForm() {   featureLayer.addAttachment(5176728, document.getElementById("myForm6") ,callback , function(err){console.log(err);});  }     function callback(result){   console.log(result);  }  dojo.addOnLoad(init);  </script>     <body class="claro">  <div id="map" style="position:relative; width:600px; height:400px; border:1px solid #000; margin:0px auto;"></div>   <form id="myForm6"><input type="file" name="attachment"/></form> </body> </html>

In order to successfully add an attachment the formNode form must contain an input item with a 'name' attribute set to the term "attachment". Below is the bare bones HTML Form which allows for successful attachments. If the name element is not tagged with the input the application with throw a "processing error" with error code 500 in firebug.

<form id="myForm1"><input type="file" name="attachment"/></form>

Let me know if it works.

Thanks,
Shreyas

ThomasLaue · ‎11-14-2012

Thank you very much for you help. It is working correctly now. Maybe this piece of information could be added to the official documentation. It would have saved me some hours if I had learned this requirement before.

TomSellsted · ‎11-19-2014

I am thankful that I found this post. I too was struggling getting this to work in my app. I agree very much with you about adding this information to the documentation. I see this post is 2 years old and it still hasn't been added to the documentation. Upon finding this post I had my app working in a couple of minutes!

ShreyasVakil · ‎11-15-2012

I apologize for that and I understand how frustrating it can be. But we are working on the documentation to make it more robust and helpful.

Just to make life of other developers easy who are going through the same trouble, can you please mark the previous post as the answer? It would be helpful to others.

JosephHarris1 · ‎01-28-2013

Hello, I am having a simliar issue described above and I used your steps which has gotten me to this point, but now I am stuck.

Is this issue with my proxy.jsp ? At this point, I do not know what this could be other than I just cannot post with this proxy.jsp.
Any feedback will probably be helpful and much appreciated.

Here is my code to add attachments:

esri.config.defaults.io.proxyUrl = "http://domain.com/proxy/proxy.jsp";
        esri.config.defaults.io.alwaysUseProxy = false;
        featureLayer = new esri.layers.FeatureLayer(featureServiceUrl, {
            outFields: ["*"],
            visible: false
        });
               featureLayer.addAttachment(objectId, document.getElementById("photoForm"), attachmentSuccess, attachmentError);

Here is the response that I receive:

Request URL:http://domain.com/proxy/proxy.jsp?http://gis.magnolia-river.com/arcgis/rest/services/GasDev/FeatureS...
Request Method:POST
Status Code:405 Method Not Allowed
Request Headersview source
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryvZ097dQtmN9qqhNX
Origin:file://
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
X-Requested-With:XMLHttpRequest
Query String Parametersview URL encoded
http://domain.com/arcgis/rest/services/GasDev/FeatureServer/0/41612/addAttachment:
Request Payload
------WebKitFormBoundaryvZ097dQtmN9qqhNX
Content-Disposition: form-data; name="attachment"; filename="Chrysanthemum.jpg"
Content-Type: image/jpeg

------WebKitFormBoundaryvZ097dQtmN9qqhNX
Content-Disposition: form-data; name="f"

json
------WebKitFormBoundaryvZ097dQtmN9qqhNX--
Response Headersview source
Allow:GET, HEAD, OPTIONS, TRACE
Content-Length:1293
Content-Type:text/html
Date:Mon, 28 Jan 2013 14:05:58 GMT
Server:Microsoft-IIS/7.5
X-Powered-By:ASP.NET

ShreyasVakil · ‎01-28-2013

I tested your service against the same above code and it works fine. I was able to add an attachment. This makes me believe that there might be something wrong with the proxy page.

Can you test your proxy page from the browser?

Just call the following URL in your browser and see if it takes you to your REST endpoint:

http://<yourdomain>/<proxyFolderIfAny>/proxy.jsp?http://gis.magnolia-river.com/arcgis/rest/services/GasDev/FeatureServer/0/41612

Here is the documentation for setting the proxy page.

RahulMetangale1 · ‎01-28-2013

Hi Shreyas,

Are you aware of any change in attachment option in 10.1, the reason I am asking this is as follows:
I am trying to upload a image from iOS 5 device to ArcGIS Feature service with help of picup (http://picupapp.com/).
With ArcGIS Server 10, I am able to add attachment however, when I point to same service published on ArcGIS Server 10.1 it does not work.

I am attaching the http request captured from wireshark for your reference. I do not see any difference between them but if you have any inputs some direction to solve this please share it with me.

[ATTACH=CONFIG]21133[/ATTACH]
[ATTACH=CONFIG]21134[/ATTACH]

Thanks,
Rahul

JosephHarris1 · ‎01-28-2013

I tested your service against the same above code and it works fine. I was able to add an attachment. This makes me believe that there might be something wrong with the proxy page.

Can you test your proxy page from the browser?

Just call the following URL in your browser and see if it takes you to your REST endpoint:

http://<yourdomain>/<proxyFolderIfAny>/proxy.jsp?http://gis.magnolia-river.com/arcgis/rest/services/GasDev/FeatureServer/0/41612

Here is the documentation for setting the proxy page.

Ok, I got it to work with the 3.0 ArcGIS javascript leveraging CORS, no proxy needed.

A side question would be, can I upload photos from a directory, versus a file being selected through the <input type="file"> ??

If this was a mobile app and I took pictures, could I upload them with this same approach without using <input type="file"> ?

Thanks for your help on the first part.

ShreyasVakil · ‎01-28-2013

Ok, I got it to work with the 3.0 ArcGIS javascript leveraging CORS, no proxy needed.

I am glad you got it to work!!

A side question would be, can I upload photos from a directory, versus a file being selected through the <input type="file"> ??

I may be wrong on this, but I don't think there is an easy way to upload a folder using just HTML/Javascript. Here are just a few links which discusses them.
Link 1
Link 2

If this was a mobile app and I took pictures, could I upload them with this same approach without using <input type="file"> ?

I tested the add attachment sample on a Android Tablet's browser and it worked fine. So I think it should work.