Display Image Attachments in Popup

9547
12
Jump to solution
02-19-2013 04:08 AM
BrendanDwyer
Occasional Contributor
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
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor
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.

View solution in original post

0 Kudos
12 Replies
DanielMunoz
Occasional Contributor
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
0 Kudos
ReneRubalcava
Frequent Contributor
Ignore this HTMLPopup nonsense, the attachment link will work for this.
0 Kudos
DanielMunoz
Occasional Contributor
Thank you! I will give it a try.
0 Kudos
CraigMcDade
Occasional Contributor III
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.
0 Kudos
soumahorosahi_ibrahim
New Contributor

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 

0 Kudos
Matrix_Solutions_Inc_Geomatics
New Contributor III
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
0 Kudos
Quynh_NhuMai
New Contributor III

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

0 Kudos
ReneRubalcava
Frequent Contributor
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.
0 Kudos
ReneRubalcava
Frequent Contributor
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.

View solution in original post

0 Kudos