Display Image Attachments in Popup

[BrendanDwyer]

Has anyone developed a popup in javascript that will display attachments? 

I'm working with Server 10.0 with the latest javascript api (3.3?).  I have a service that has attachments and I want to display these attachments (they are images) in a popup or infowindow.  There are a couple of threads that mention this, but I haven't seen an implementation.  If anyone has done this already, please let me know.

Thanks,

Brendan

[DanielMunoz]

Hello All,

I'm in the exact same situation, I had searched all over with no luck, flexviewer can do it but for mobile devices that can not see flex apps it is necessary.

Thank you

[ReneRubalcava]

Ignore this HTMLPopup nonsense, the attachment link will work for this.

[DanielMunoz]

Thank you! I will give it a try.

[CraigMcDade]

The home page of the ArcGIS API for Javascript website used to have a sample that showed all the ultra-marathons in the USA, when clicked a photo would show in the infowindow/popup that showed the finishers medal. I'm not sure how that photo was being pushed there, whether it was in the data or a hyperlink from somewhere, but nevertheless, it would probably give a good idea of how to proceed.

You know, if it could be found...

I'll search around, since the website update, it takes a few minutes to find things, but I'm sure its still a live link somewhere.

EDIT: Found It. Sort of. This one is housed on arcgisonline. Looks like they are hyperlinks to the image source on the races external webpage.

http://www.arcgis.com/home/webmap/viewer.html?webmap=5b9675ca7ca9426a99ced88f66b42331

Are you able to create hyperlinks for your attachments? I created a previous app that hyperlinked pdf document attachments to the infowindow/popup. Not sure if that would be helpful to you or not.

[soumahorosahi_ibrahim]

Dear Craig,

How can i do the same example using Arcgis Api for siverlight shown in this link http://www.arcgis.com/home/webmap/viewer.html?webmap=5b9675ca7ca9426a99ced88f66b42331 

[Matrix_Solutions_Inc_Geomatics]

I did this in the silverlight API. I had to do an attachment query the target feature(s) then read the URL. not sure how it translates to JS but it was something like

FeatureLayerInfo queryFeatLayerInfo = queryFeatLayer.LayerInfo;
                                                try
                                                {
                                                    if (queryFeatLayerInfo.HasAttachments)
                                                    {
                                                        queryFeatLayer.QueryAttachmentInfos(featureGraphic,
                                                                                            FeatureLayer_QryAttachmentsComplete,
                                                                                            FeatureLayer_QryAttachmentsFail);
                                                    }
                                                }
                                                catch (Exception ex)
                                                {
                                                    Debug.WriteLine(ex.ToString());
                                                }

Then when it returns the results you just read the url off the attachment info.

var attachmentInfos = aInfos as IList<AttachmentInfo>
if (attachmentInfos.Any())
{
    image.url = attachmentInfos.First().Uri.ToString()
}

It reads the url location of the 'Output' folder on the arcgis server. May have to configure that folders permissions, i think i had too.
Hope that helps

[Quynh_NhuMai]

Hi--question : How did you have to configure the Output folder? And why? Thanks

[ReneRubalcava]

I put a gist together to demonstrate this.
https://gist.github.com/odoe/5059401

Based it roughly off this example, but only display attachment images if available.
http://help.arcgis.com/en/webapi/javascript/arcgis/samples/ed_attachments/index.html

My FTP is acting up, but I put a demo on my dropbox, let's see if this works.
http://dl.dropbox.com/u/3193991/attimgdemo/index.html
There should be an image attachment on that black dot in the middle of the screen.

[ReneRubalcava · Accepted solution]

Ah crap, ignore everything I said.
The regular URL works.

My bad, the attachment link in the attachments endpoint works for this.

Here is a gist
https://gist.github.com/odoe/5059401

<!doctype html> <html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">      <title>demo</title>   <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">   <link rel="stylesheet" href='http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/dijit/css/Popup.css'/>  <style>   html, body { height: 100%; width: 100%; margin: 0; padding: 0; }   #map { position: absolute; top:0; bottom:0; left:0; right:0; }  </style>   </head>   <body class="claro">  <div id="map"></div>   </body>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  <script src="main.js"></script>  </html>

/* * Add attachment images through this sample: http://help.arcgis.com/en/webapi/javascript/arcgis/samples/ed_attachments/index.html * And use this demo to view them in a popup */ (function() {     // dojo config stuff     require({         parseOnLoad:true     });      require([         'dojo/dom-construct',         'dojo/_base/connect',         'esri/dijit/Popup',         'esri/layers/FeatureLayer',         'dojo/domReady!'         ], function (domConstruct, connect) {             var map, popup, featureLayer;              popup = new esri.dijit.Popup(null, domConstruct.create('div'));              map = new esri.Map('map', {                 basemap: 'streets',                 center: [-122.427, 37.769],                 zoom: 19,                 infoWindow: popup             });             connect.connect(map, 'onLoad', function (_map_) {                 featureLayer = new esri.layers.FeatureLayer('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0', {                     mode: esri.layers.FeatureLayer.MODE_ONDEMAND                     });                 connect.connect(featureLayer, 'onClick', function (e) {                     var objectId, el;                     objectId = e.graphic.attributes[featureLayer.objectIdField];                     featureLayer.queryAttachmentInfos(objectId, function (infos) {                         map.infoWindow.setTitle(objectId);                         el = document.createElement('img');                         if (!!infos[0].url) {                             el.setAttribute('src', infos[0].url);                             map.infoWindow.setContent(el);                             map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));                         }                      });                 });                 map.addLayer(featureLayer);             });         });  }).call(this);

Tony is right about the queryAttachmentInfos being all your need. It's the same URL you would see in the attribute inspector. My head is somewhere else today.