topic Re: Display attachments in popup in ArcGIS JavaScript Maps SDK Questions

Display attachments in popup

Quynh_NhuMai — Sun, 12 Dec 2021 07:41:26 GMT

I am trying to display an attachment (originally added using the attachment tool in Desktop) in a arcgis jsapi 3.17 Popup. I am unable, however, to query the attachment infos and receive an IO error.

Running the code below, the 'infos' printed to the console returns the image information, but the popup does not display an image nor hyperlink.


var identifyTask, identifyParams, idPoint;
var identifyResults;
window.idHandler;

require([
  "esri/dijit/Popup",
  "esri/dijit/PopupTemplate",
  "esri/tasks/IdentifyTask",
  "esri/tasks/IdentifyParameters",
  "esri/layers/FeatureLayer",
  "dijit/form/CheckBox",
  "dijit/form/Select",
  "dijit/form/ToggleButton",
  "dijit/registry",
  "dojo/on",
  "dojo/query",
  "dojo/dom-construct",
  "dojo/promise/all",
  "dojo/domReady!"
], function (
  Popup, PopupTemplate, IdentifyTask, IdentifyParameters, FeatureLayer, CheckBox, Select, ToggleButton, registry, on, query, domConstruct, All)
  {
    var popup = new Popup({
      fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
    }, dojo.create("div"));
    
    
    var idButton = new ToggleButton({
      label: "Identifier les entités",
      showLabel: false,
      iconClass: "identifyIcon",
      checked: false,
      onChange: function (val) {
        //alert("test button clicked")
        if (val) {
          window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
          toggleButtonIcon(this);
          console.log("Identify started");
        }
        else {
          window.idHandler.pause();
          console.log("Identify paused");
        }
        //toggleButtonIcon(this);
      }
    }, "id_button");
    idButton.startup();
    
    function mapReady(map) {
      //window.connect = dojo.connect(window.myMap, "onClick", runIdentifies);
      window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
    }
    
    function runIdentifies(evt) {
      identifyResults = [];
      idPoint = evt.mapPoint;
      var layers = dojo.map(window.myMap.layerIds, function (layerId) {
        return window.myMap.getLayer(layerId);
      });
      layers = dojo.filter(layers, function (layer) {
        //console.log(layer.layerInfos[0].name);
        if (layer.visibleLayers[0] !== -1) {
          return layer.getImageUrl && layer.visible
        }
      }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
      var tasks = dojo.map(layers, function (layer) {
        return new IdentifyTask(layer.url);
      }); //map each visible dynamic layer to a new identify task, using the layer url
      var defTasks = dojo.map(tasks, function (task) {
        return new dojo.Deferred();
      }); //map each identify task to a new dojo.Deferred
      var params = createIdentifyParams(layers, evt);
      
      var promises = [];
      
      for (i = 0; i < tasks.length; i++) {
        promises.push(tasks[i].execute(params[i])); //Execute each task
      }
      
      var allPromises = new All(promises);
      allPromises.then(function (r) { showIdentifyResults(r, tasks); });
    }
    
    function showIdentifyResults(r, tasks) {
      var results = [];
      var taskUrls = [];
      var resultNames = [];
      var identifySelect;
      
      
      r = dojo.filter(r, function (result) {
        return r[0];
      });
      for (i = 0; i < r.length; i++) {
        results = results.concat(r[i]);
        for (j = 0; j < r[i].length; j++) {
          taskUrls = taskUrls.concat(tasks[i].url);
        }
      }
      
      var idx = 0;
      results = dojo.map(results, function (result, index) {
        if (!result.layerName == "CADRILLAGE"
      )) {
        var feature = result.feature;
        var layerName = result.layerName;
        var serviceUrl = taskUrls[index];
        //resultNames[index] = result.layerName;
        resultNames.push({
          value: idx,
          label: result.layerName
        });
        idx++;
        feature.attributes.layerName = result.layerName;
        
       
        
        
        identifySelect = dijit.byId("id_select");
        
        identifySelect.removeOption(identifySelect.getOptions());
        identifySelect.addOption(resultNames);
        //var identifiedList = getIdentifiedList(resultNames);
        //console.log(identifiedList);
        
        
        if (layerName === 'E_HYDRAN') {
          
          
          var template = new PopupTemplate({
            title: "My Title",
            fieldInfos: [
              {fieldName: "Address", label: "<b>Address:</b>", visible: true},
              {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
              showAttachments:true,
            });
            
            var featureLayer = new FeatureLayer("http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3",{
              mode: FeatureLayer.MODE_ONDEMAND,
              infoTemplate: template,
              outFields: ["*"]
            });
            
            var objectId, el;
            
            objectId = feature.attributes.objectid;
            
            featureLayer.queryAttachmentInfos(objectId, function (infos) {
              //map.infoWindow.setTitle(objectId);
              el = document.createElement('img');
              if (infos[0].url) {
                el.setAttribute('src', infos[0].url);
                template.setContent(el);
                //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
              }
            });
            
            
            //var template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
            feature.setInfoTemplate(template);
          }
          else {
            template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
            feature.setInfoTemplate(template);
          }
            
            
            
            var resultGeometry = feature.geometry;
            var resultType = resultGeometry.type;
            return feature;
          }
          
        });
        
        results = results.filter(function(n){
          return n != undefined
        });
        
        if (results.length === 0) {
          window.myMap.infoWindow.clearFeatures();
        } else {
          window.myMap.infoWindow.setFeatures(results);
        }
        
        
        
        window.myMap.infoWindow.show(idPoint);
        
        if (typeof identifySelect != 'undefined') {
          identifySelect.on('change', function(evt) {
            var identIndex = identifySelect.get("value");
            console.log(identIndex);
            window.myMap.infoWindow.select(identIndex);
          });
        }
        
        
        return results;
      }
      
      function getIdentifiedList(options) {
        identifySelect = new Select({
          name: "identifySelect",
          id: "id_select",
          options: options
        }, domConstruct.create("select"));
        return identifySelect.domNode;
      }
      
      function createIdentifyParams(layers, evt) {
        var identifyParamsList = [];
        identifyParamsList.length = 0;
        dojo.forEach(layers, function (layer) {
          var idParams = new esri.tasks.IdentifyParameters();
          idParams.width = window.myMap.width;
          idParams.height = window.myMap.height;
          idParams.geometry = evt.mapPoint;
          idParams.mapExtent = window.myMap.extent;
          idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
          var visLayers = layer.visibleLayers;
          if (visLayers !== -1) {
            var subLayers = [];
            for (var i = 0; i < layer.layerInfos.length; i++) {
              if (layer.layerInfos[i].subLayerIds == null)
              subLayers.push(layer.layerInfos[i].id);
            }
            idParams.layerIds = subLayers;
          } else {
            idParams.layerIds = [];
          }
          idParams.tolerance = 7;
          idParams.returnGeometry = true;
          identifyParamsList.push(idParams);
        });
        return identifyParamsList;
      }
      
      function toggleButtonIcon(tool) {
        //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
        
        var domNodes = query('.dijitToggleButton', this.domNode);
        //var measureDivNodes = dojo.byId("measurementDiv");
        //var measureNodes = query('.dijitButtonNode', measureDivNodes);
        
        domNodes.forEach(function(domNode){
          var togbtn = registry.getEnclosingWidget(domNode);
          if (togbtn == tool) {
            togbtn.attr("checked", true);
            //console.log("Checked is true");
          }
          else {
            togbtn.attr("checked", false);
            //console.log("Checked is false");
          }
        });
        
        
        
       
      }
      
      
    });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Should I be looking for something in particular relative to the template for the feature?

**UPDATE** Still not working, but am now trying to use the mediaInfos property to see if it works. Here's how that looks:

var identifyTask, identifyParams, idPoint;
var identifyResults;
window.idHandler;
require([
 "esri/dijit/Popup",
 "esri/dijit/PopupTemplate",
 "esri/tasks/IdentifyTask",
 "esri/tasks/IdentifyParameters",
 "esri/layers/FeatureLayer",
 "dijit/form/CheckBox",
 "dijit/form/Select",
 "dijit/form/ToggleButton",
 "dijit/registry",
 "dojo/on",
 "dojo/query",
 "dojo/dom-construct",
 "dojo/promise/all",
 "dojo/domReady!"
], function (
 Popup, PopupTemplate, IdentifyTask, IdentifyParameters, FeatureLayer, CheckBox, Select, ToggleButton, registry, on, query, domConstruct, All)
 {
 var popup = new Popup({
 fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
 }, dojo.create("div"));
var idButton = new ToggleButton({
 label: "Identifier les entités",
 showLabel: false,
 iconClass: "identifyIcon",
 checked: false,
 onChange: function (val) {
 //alert("test button clicked")
 if (val) {
 window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
 toggleButtonIcon(this);
 console.log("Identify started");
 // measurementActiveButton = dojo.query(".esriMeasurement .esriButton.esriButtonChecked .dijitButtonNode")[0]
 // if(measurementActiveButton){
 // measurementActiveButton.click();
 // }
 }
 else {
 window.idHandler.pause();
 console.log("Identify paused");
 }
 //toggleButtonIcon(this);
 }
 }, "id_button");
 idButton.startup();
function mapReady(map) {
 //window.connect = dojo.connect(window.myMap, "onClick", runIdentifies);
 window.idHandler = on.pausable(window.myMap, "click", runIdentifies);
 }
function runIdentifies(evt) {
 identifyResults = [];
 idPoint = evt.mapPoint;
 var layers = dojo.map(window.myMap.layerIds, function (layerId) {
 return window.myMap.getLayer(layerId);
 });
 layers = dojo.filter(layers, function (layer) {
 //console.log(layer.layerInfos[0].name);
 if (layer.visibleLayers[0] !== -1) {
 return layer.getImageUrl && layer.visible
 }
 }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
 var tasks = dojo.map(layers, function (layer) {
 return new IdentifyTask(layer.url);
 }); //map each visible dynamic layer to a new identify task, using the layer url
 var defTasks = dojo.map(tasks, function (task) {
 return new dojo.Deferred();
 }); //map each identify task to a new dojo.Deferred
 var params = createIdentifyParams(layers, evt);
var promises = [];
for (i = 0; i < tasks.length; i++) {
 promises.push(tasks[i].execute(params[i])); //Execute each task
 }
var allPromises = new All(promises);
 allPromises.then(function (r) { showIdentifyResults(r, tasks); });
 }
function showIdentifyResults(r, tasks) {
 var results = [];
 var taskUrls = [];
 var resultNames = [];
 var identifySelect;

 r = dojo.filter(r, function (result) {
 return r[0];
 });
 for (i = 0; i < r.length; i++) {
 results = results.concat(r[i]);
 for (j = 0; j < r[i].length; j++) {
 taskUrls = taskUrls.concat(tasks[i].url);
 }
 }
 var idx = 0;
 results = dojo.map(results, function (result, index) {
 if (!result.layerName == "CADRILLAGE") {
 var feature = result.feature;
 var layerName = result.layerName;
 var serviceUrl = taskUrls[index];
 //resultNames[index] = result.layerName;
 resultNames.push({
 value: idx,
 label: result.layerName
 });
 idx++;
 feature.attributes.layerName = result.layerName;


 identifySelect = dijit.byId("id_select");
identifySelect.removeOption(identifySelect.getOptions());
 identifySelect.addOption(resultNames);
 //var identifiedList = getIdentifiedList(resultNames);
 //console.log(identifiedList);

 if (layerName === 'E_HYDRAN') {

 // var template = new PopupTemplate({
 // title: "My Title",
 // fieldInfos: [
 // {fieldName: "Address", label: "<b>Address:</b>", visible: true},
 // {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
 // showAttachments:true,
 // });
var featureLayer = new FeatureLayer("http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3",{
 mode: FeatureLayer.MODE_ONDEMAND,
 infoTemplate: template,
 outFields: ["*"]
 });
var objectId, el;
 var pminfos = [];
 var popUpMediaInfo;
objectId = feature.attributes.objectid;
featureLayer.queryAttachmentInfos(objectId, function (infos) {
 var popUpInfo = {
 title: "Attachment images",
 description: "",
 showAttachments: false
 };
 arrayUtils.window.myMap(infos, function(info)) {
 if (!!info.url) {
 popUpMediaInfo = {};
 popUpMediaInfo.type = 'image';
 popUpMediaInfo.value = {};
 popUpMediaInfo.value.sourceURL = info.url;
 popUpMediaInfo.value.linkURL = info.url;
 popUpMediaInfo.caption = info.name;
 pminfos.push(popUpMediaInfo);
 }
 });
 popUpInfo.mediaInfos = pminfos;
 var template = new PopupTemplate(popUpInfo);
//map.infoWindow.setTitle(objectId);
 // el = document.createElement('img');
 // if (infos[0].url) {
 // el.setAttribute('src', infos[0].url);
 // template.setContent(el);
 // //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
 // }
 });

 //var template = new esri.InfoTemplate(layerName + "<br/><br/>NUMERO : ${NUMERO}<br/><br/>", "${*}");
 feature.setInfoTemplate(template);
 }
 else {
 // var template = new esri.InfoTemplate(layerName,
 // "${*}");
 //template.setTitle(identifiedList);
 var template = new PopupTemplate({
 title: "My Title",
 fieldInfos: [
 {fieldName: "Address", label: "<b>Address:</b>", visible: true},
 {fieldName: "City_1", label: "<b>City:</b>", visible: true}],
 showAttachments:true,
 });
 feature.setInfoTemplate(template);
 }

var resultGeometry = feature.geometry;
 var resultType = resultGeometry.type;
 return feature;
 }
});
results = results.filter(function(n){
 return n != undefined
 });
if (results.length === 0) {
 window.myMap.infoWindow.clearFeatures();
 } else {
 window.myMap.infoWindow.setFeatures(results);
 }

window.myMap.infoWindow.show(idPoint);
if (typeof identifySelect != 'undefined') {
 identifySelect.on('change', function(evt) {
 var identIndex = identifySelect.get("value");
 console.log(identIndex);
 window.myMap.infoWindow.select(identIndex);
 });
 }

 return results;
 }
function getIdentifiedList(options) {
 identifySelect = new Select({
 name: "identifySelect",
 id: "id_select",
 options: options
 }, domConstruct.create("select"));
 return identifySelect.domNode;
 }
function createIdentifyParams(layers, evt) {
 var identifyParamsList = [];
 identifyParamsList.length = 0;
 dojo.forEach(layers, function (layer) {
 var idParams = new esri.tasks.IdentifyParameters();
 idParams.width = window.myMap.width;
 idParams.height = window.myMap.height;
 idParams.geometry = evt.mapPoint;
 idParams.mapExtent = window.myMap.extent;
 idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
 var visLayers = layer.visibleLayers;
 if (visLayers !== -1) {
 var subLayers = [];
 for (var i = 0; i < layer.layerInfos.length; i++) {
 if (layer.layerInfos[i].subLayerIds == null)
 subLayers.push(layer.layerInfos[i].id);
 }
 idParams.layerIds = subLayers;
 } else {
 idParams.layerIds = [];
 }
 idParams.tolerance = 7;
 idParams.returnGeometry = true;
 identifyParamsList.push(idParams);
 });
 return identifyParamsList;
 }
function toggleButtonIcon(tool) {
 //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
var domNodes = query('.dijitToggleButton', this.domNode);
 //var measureDivNodes = dojo.byId("measurementDiv");
 //var measureNodes = query('.dijitButtonNode', measureDivNodes);
domNodes.forEach(function(domNode){
 var togbtn = registry.getEnclosingWidget(domNode);
 if (togbtn == tool) {
 togbtn.attr("checked", true);
 //console.log("Checked is true");
 }
 else {
 togbtn.attr("checked", false);
 //console.log("Checked is false");
 }
 });


 }

 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Display attachments in popup

RobertScheitlin__GISP — Wed, 04 Oct 2017 12:57:39 GMT

Quynh,

Are you sure this line is correct?

if (!!infos[0].url) {‍

I would think it should be:

if (infos[0].url) {‍

Since you are looking to see if there is a url.

Re: Display attachments in popup

Quynh_NhuMai — Wed, 04 Oct 2017 18:59:03 GMT

Hi Robert,

I made the change you suggested, and the info window still does not display an attachment nor hyperlink. I pasted the json pertaining to the image template for the feature. I'm unsure if we can tell from here whether or not the url of the image made it on there or not...

Re: Display attachments in popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:41:29 GMT

Quynh,

Your code is not formatted and thus is hard to read. What code you have posted will not run as it is so I assume that you are leaving out some code that would get you the feature object (from line 2).

var objectId, el;
objectId = feature.attributes.objectid;
featureLayer.queryAttachmentInfos(objectId, function (infos) {
  //map.infoWindow.setTitle(objectId);
  console.log(infos);
  el = document.createElement('img');
  if (infos[0].url) {
    el.setAttribute('src', infos[0].url);
    template.setContent(el);
    //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
  }
});

feature.setInfoTemplate(template);
console.log(feature);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Without seeing more of the code I can not tell where your mistakes are and what you are just leaving out from what you are posting.

/blogs/sergent/2015/02/18/formatting-your-code-in-geonet-for-the-visual-learner

Re: Display attachments in popup

Quynh_NhuMai — Wed, 04 Oct 2017 19:54:14 GMT

Oh great, thank you. The interface seems a bit different now, but the code should be better formatted and I have added the code related to the identify task. The map is initialized in another file...would this code help too?

Re: Display attachments in popup

RobertScheitlin__GISP — Wed, 04 Oct 2017 20:01:19 GMT

What about setting a height and width fro your img html element?

Re: Display attachments in popup

Quynh_NhuMai — Wed, 04 Oct 2017 20:56:10 GMT

Thanks for the suggestion, I just tried it. Printing the template info to the console indicates the height and width properties were successfully added. The img url is equally accessible. However, the info window does not display the image nor hyperlink.

Console output when printing popup template (sorry again for the format, haven't figured out how to do so for json) :

{info: {…}, _fieldLabels: {…}, _fieldsMap: {…}, title: ƒ, content: ƒ, …}

content: imgaccessKey: ""align: ""alt: ""assignedSlot: nullattributes: NamedNodeMap0: src1: heightbaseURI: "http://srv-tit-testbd/SPE_SIG_SGBD/"childNodes: []firstChild: nullisConnected: falselastChild: nulllocalName: "height"name: "height"namespaceURI: nullnextSibling: nullnodeName: "height"nodeType: 2nodeValue: "150px"ownerDocument: documentownerElement: imgparentElement: nullparentNode: nullprefix: nullpreviousSibling: nullspecified: truetextContent: "150px"value: "150px"__proto__: Attr2: widthbaseURI: "http://srv-tit-testbd/SPE_SIG_SGBD/"childNodes: []firstChild: nullisConnected: falselastChild: nulllocalName: "width"name: "width"namespaceURI: nullnextSibling: nullnodeName: "width"nodeType: 2nodeValue: "150px"ownerDocument: documentownerElement: imgparentElement: nullparentNode: nullprefix: nullpreviousSibling: nullspecified: truetextContent: "150px"value: "150px"__proto__: Attrlength: 3__proto__: NamedNodeMapbaseURI: "http://srv-tit-testbd/SPE_SIG_SGBD/"border: ""childElementCount: 0childNodes: []children: []classList: [value: ""]className: ""clientHeight: 0clientLeft: 0clientTop: 0clientWidth: 0complete: truecontentEditable: "inherit"crossOrigin: nullcurrentSrc: "http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138"dataset: DOMStringMap__proto__: DOMStringMapdir: ""draggable: truefirstChild: nullfirstElementChild: nullheight: 150hidden: falsehspace: 0id: ""innerHTML: ""innerText: ""isConnected: falseisContentEditable: falseisMap: falselang: ""lastChild: nulllastElementChild: nulllocalName: "img"longDesc: ""lowsrc: ""name: ""namespaceURI: "http://www.w3.org/1999/xhtml"naturalHeight: 1275naturalWidth: 1755nextElementSibling: nullnextSibling: nullnodeName: "IMG"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<img src="http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138" height="150px" width="150px">"outerText: ""ownerDocument: documentparentElement: nullparentNode: nullprefix: nullpreviousElementSibling: nullpreviousSibling: nullreferrerPolicy: ""scrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0shadowRoot: nullsizes: ""slot: ""spellcheck: truesrc: "http://srv-tit-testbd/arcgis/rest/services/Tests/PPT_EAU_GDB/MapServer/3/63/attachments/138"srcset: ""style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}tabIndex: -1tagName: "IMG"textContent: ""title: ""translate: trueuseMap: ""vspace: 0width: 150x: 0y: 0__proto__: HTMLImageElementinfo: fieldInfos: (2) [{…}, {…}]showAttachments: truetitle: "E_HYDRAN"__proto__: Objecttitle: ƒ (a)titleHasRelatedFields: false_fieldLabels: {address: "<b>Address:</b>", city_1: "<b>City:</b>"}_fieldsMap: {address: {…}, city_1: {…}}_relatedFieldPrefix: "relationships/"__proto__: Object
Identify.js:253 {geometry: {…}, symbol: null, attributes: {…}, infoTemplate: {…}}

Re: Display attachments in popup

RobertScheitlin__GISP — Wed, 04 Oct 2017 21:02:18 GMT

Quynh,

Well the problem I see with that is that the url you are adding as the img src does not seem to be an image file (at least there is not a image file suffix).

I would expect to see something like this:

Re: Display attachments in popup

Quynh_NhuMai — Wed, 04 Oct 2017 21:26:52 GMT

Robert,

Ok--I wonder if this is due to the way attachments were added to the feature service then. Does knowing that accessing the url identified in the console allows us to visualise the image make a difference to your previous comment?

I have tried to concatenate .jpg to the end arbitrarily (fortunately we only have jpgs), which succeeds in creating a template with this img src (including prefix). However, this url does not succeed in accessing the image when browsed to using the navigator.

Re: Display attachments in popup

RobertScheitlin__GISP — Wed, 04 Oct 2017 21:29:15 GMT

What does the browsers address look like after you just click the url you had earlier?

Re: Display attachments in popup

Quynh_NhuMai — Wed, 04 Oct 2017 21:54:00 GMT

In the console, the url is not clickable...But, copy and pasting it into the browser, we receive a page with the attached image, and the url stays the same (e.g. http://ourserver/arcgis/rest/services/tests/servicetests/MapServer/3/222/attachments/755)

Strangely, navigating http://ourserver/arcgis/rest/services/tests/servicetests/MapServer/3/222/attachments/755.jpg brings me to the "Attachment Infos" page in the ArcGIS REST Services Directory for feature id 222.

Re: Display attachments in popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:41:32 GMT

Quynh,

Here is another way to do this using media infos in the popup:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Sample Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.20/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://js.arcgis.com/3.20/"></script>
  <script>
    var map, popup, featureLayer;

    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Popup",
      "esri/dijit/PopupTemplate", "dojo/dom-construct", "dojo/on",
      "dojo/_base/array", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Popup,
      PopupTemplate, domConstruct, on, arrayUtils
    ) {
      popup = new Popup(null, domConstruct.create('div'));

      map = new Map('mapDiv', {
        basemap: "gray",
        center: [-95, 40],
        zoom: 4,
        infoWindow: popup
      });
      on(map, 'load', function(_map_) {
        featureLayer = new FeatureLayer('https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_attach/FeatureServer/0', {
          mode: FeatureLayer.MODE_ONDEMAND
        });
        on(featureLayer, 'click', function(e) {
          var objectId, el;
          var pminfos = [];
          var popUpMediaInfo;
          objectId = e.graphic.attributes[featureLayer.objectIdField];
          featureLayer.queryAttachmentInfos(objectId, function(infos) {
            var popUpInfo = {
              title: "Attachment images",
              description: "",
              showAttachments: false
            };
            arrayUtils.map(infos, function(info){
              if (!!info.url) {
                popUpMediaInfo = {};
                popUpMediaInfo.type = 'image';
                popUpMediaInfo.value = {};
                popUpMediaInfo.value.sourceURL = info.url;
                popUpMediaInfo.value.linkURL = info.url;
                popUpMediaInfo.caption = info.name;
                pminfos.push(popUpMediaInfo);
              }
            });
            popUpInfo.mediaInfos = pminfos;
            var pt = new PopupTemplate(popUpInfo);
            e.graphic.setInfoTemplate(pt);
            map.infoWindow.setFeatures([e.graphic]);
            map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));
          });
        });
        map.addLayer(featureLayer);
      });
    });
  </script>
</head>

<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Display attachments in popup

Quynh_NhuMai — Wed, 11 Oct 2017 01:19:36 GMT

Robert,

I've attempted to integrate your suggestion regarding the mediaInfos property. I still, however, cannot get this to work. I wonder if it has to do with the fact that I have an identify task wired up for the feature, where as your example has set up a global popup for the map. Would you maybe be willing to take a look at the app in it's entirety?

In any case, I'll add an update to my post to demonstrate how I've attempted to use mediaInfos.

Re: Display attachments in popup

RobertScheitlin__GISP — Wed, 11 Oct 2017 13:04:10 GMT

Quynh,

It is hard to say what is going wrong based on the way you are doing this in your code. If you attach your whole App I can take a look.

Re: Display attachments in popup

Quynh_NhuMai — Wed, 11 Oct 2017 20:44:36 GMT

Robert,

I've attached the app. Thanks a lot!

Re: Display attachments in popup

RobertScheitlin__GISP — Thu, 12 Oct 2017 14:42:30 GMT

You don't have a publicly accessible map service do you? I am not finding your code issue and can not do much else without being able to actually run and debug your app.

Re: Display attachments in popup

Quynh_NhuMai — Fri, 13 Oct 2017 19:04:29 GMT

I do--would you be willing to let me email you the url?

Re: Display attachments in popup

RobertScheitlin__GISP — Fri, 13 Oct 2017 23:41:09 GMT

Quynh,

I am now following you on GeoNet so if you choose to follow me we can private message me the URL.

Re: Display attachments in popup

RobertScheitlin__GISP — Mon, 16 Oct 2017 13:48:04 GMT

Quynh,

Attached you will find my fixes to your Identify.js and comments on some of my changes.

Re: Display attachments in popup

Quynh_NhuMai — Wed, 18 Oct 2017 01:33:43 GMT

Robert,

Thanks again for taking a look at that.

My take aways so far on this :

-popUpMediaInfos is the way to go (in what cases would one choose this?)

-infoTemplate was not set in the right place (should be inside the queryAttachments function)

-arrayUtils should be on map and not the window.myMap global variable (by why...?)

-should delay the display of the info window