nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Vind meer berichten getagd met

Accepted answers

ReneRubalcava

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'/&gt;  <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.

All comments

Quynh_NhuMai

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

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

BrendanDwyer

Rene, Dave, Tony, Craig,
Thanks for the responses. Apologies for not replying sooner. I'll check out the suggestions and links today.

-Brendan

DavidMcGill

http://storymaps.esri.com/home/

good site with lots of examples for images in popup.

SeanRedar

Thanks! I just switched the event from 'onClick' to 'onMouseOver' and got just what I was looking for.

ReneRubalcava

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'/&gt;  <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.

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.

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

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.

DanielMx

Thank you! I will give it a try.

ReneRubalcava

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

DanielMx

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.