dom is undefined error when trying to upload shapefile

MateenEsfahanian · ‎06-24-2014

I have been working on an arcgis project for the last two weeks and I have ran into an issue with my upload shapefile function in my code. I keep getting an dom is undefined error and I don't know what to do.

Here is the code:

<div class="modal fade" id="UpdateShapefileForm" tabindex="-1" role="dialog" aria-    labelledby="Set View" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <form enctype="multipart/form-data" method="post" id="uploadForm">
          <div class="field">
              <label class="file-upload">
                  <span><strong>Add File</strong></span>
                 <input type="file" name="file" id="inFile"/>
              </label>
          </div>
         </form>
        </div>
       </div>
      </div>
     </div>

<script src="http://js.arcgis.com/3.9/"></script>
<script src="/static/js/mapping/mapobject.js" type="text/javascript"></script>
<script src="/static/js/mapping/mapmanager.js" type="text/javascript"></script>
<script type="text/javascript">

    var map, toolbar;
    var PROJECT_OUTLINE, PROJECT_FILL, PARCEL_OUTLINE, PARCEL_FILL, PLOT_OUTLINE, PLOT_FILL;
    var toolbarEvent;
    var mapManager = new MapManager();

    var markerPictures = {
        'project': '/static/assets/grnball.png',
        'parcel': '/static/assets/bluball.png',
        'plot': '/static/assets/redball.png'
    }

    require([
    "esri/config",
    "esri/InfoTemplate",
    "esri/map",
    "esri/request",
    "esri/geometry/scaleUtils",
    "esri/layers/FeatureLayer",
    "esri/renderers/SimpleRenderer",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "dojo/dom",
    "dojo/json",
    "dojo/on",
    "dojo/parser",
    "dojo/sniff",
    "dojo/_base/array",
    "esri/Color",
    "dojo/_base/lang",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"         
    ], function(
        esriConfig, InfoTemplate, Map, request, scaleUtils, FeatureLayer,
    SimpleRenderer, PictureMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,
    dom, JSON, on, parser, sniff, arrayUtils, Color, lang
      ) {


        map = new Map("mapcanvas", {
            center: [-56.049, 38.485],
            zoom: 3,
            basemap: "hybrid"
        });

        map.on("load", function() {
            $("#waiting_img").hide();
            createToolbar();
            setConstants();
     parser.parse();

      var portalUrl = "http://www.arcgis.com";

      esriConfig.defaults.io.proxyUrl = "/proxy";

      on(dom.byId("uploadForm"), "change", function (event) {
        var fileName = event.target.value.toLowerCase();

        if (sniff("ie")) { //filename is full path in IE so extract the file name
          var arr = fileName.split("\\");
          fileName = arr[arr.length - 1];
        }
        if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user
          generateFeatureCollection(fileName);
        }
        else {
          dom.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>';
        }

            map.graphics.on("click", function(evt) {
                console.log("geometry type: " + evt.graphic.geometry.type);
                if(evt.graphic.geometry.type == "polygon")
                {
                    selectPolygon();
                }
                else if(evt.graphic.geometry.type == "multipoint" || evt.graphic.geometry.type == "point")
                {
                    selectMarker();
                }
            });
        });

    });


      });

      function generateFeatureCollection (fileName) {
        var name = fileName.split(".");
        //Chrome and IE add c:\fakepath to the value - we need to remove it
        //See this link for more info: http://davidwalsh.name/fakepath
        name = name[0].replace("c:\\fakepath\\", "");

        dom.byId('upload-status').innerHTML = '<b>Loading </b>' + name;

        //Define the input params for generate see the rest doc for details
        //http://www.arcgis.com/apidocs/rest/index.html?generate.html
        var params = {
          'name': name,
          'targetSR': map.spatialReference,
          'maxRecordCount': 1000,
          'enforceInputFileSizeLimit': true,
          'enforceOutputJsonSizeLimit': true
        };

        //generalize features for display Here we generalize at 1:40,000 which is approx 10 meters
        //This should work well when using web mercator.
        var extent = scaleUtils.getExtentForScale(map, 40000);
        var resolution = extent.getWidth() / map.width;
        params.generalize = true;
        params.maxAllowableOffset = resolution;
        params.reducePrecision = true;
        params.numberOfDigitsAfterDecimal = 0;

        var myContent = {
          'filetype': 'shapefile',
          'publishParameters': JSON.stringify(params),
          'f': 'json',
          'callback.html': 'textarea'
        };

        //use the rest generate operation to generate a feature collection from the zipped shapefile
        request({
          url: portalUrl + '/sharing/rest/content/features/generate',
          content: myContent,
          form: dom.byId('uploadForm'),
          handleAs: 'json',
          load: lang.hitch(this, function (response) {
            if (response.error) {
              errorHandler(response.error);
              return;
            }
            var layerName = response.featureCollection.layers[0].layerDefinition.name;
            dom.byId('upload-status').innerHTML = '<b>Loaded: </b>' + layerName;
            addShapefileToMap(response.featureCollection);
          }),
          error: lang.hitch(this, errorHandler)
        });
      }

      function errorHandler (error) {
        dom.byId('upload-status').innerHTML =
        "<p style='color:red'>" + error.message + "</p>";
      }

      function addShapefileToMap (featureCollection) {
        //add the shapefile to the map and zoom to the feature collection extent
        //If you want to persist the feature collection when you reload browser you could store the collection in
        //local storage by serializing the layer using featureLayer.toJson()  see the 'Feature Collection in Local Storage' sample
        //for an example of how to work with local storage.
        var fullExtent;
        var layers = [];

        arrayUtils.forEach(featureCollection.layers, function (layer) {
          var infoTemplate = new InfoTemplate("Details", "${*}");
          var featureLayer = new FeatureLayer(layer, {
            infoTemplate: infoTemplate
          });
          //associate the feature with the popup on click to enable highlight and zoom to
          featureLayer.on('click', function (event) {
            map.infoWindow.setFeatures([event.graphic]);
          });
          //change default symbol if desired. Comment this out and the layer will draw with the default symbology

          fullExtent = fullExtent ?
            fullExtent.union(featureLayer.fullExtent) : featureLayer.fullExtent;
          layers.push(featureLayer);
        });
        map.addLayers(layers);
        map.setExtent(fullExtent.expand(1.25), true);

        dom.byId('upload-status').innerHTML = "";
      }

    function setConstants() {
        PROJECT_OUTLINE = new esri.Color(([0,255,0])); 
        PROJECT_FILL = new esri.Color([0,255,0,0.5]);
        PARCEL_OUTLINE = new esri.Color(([0,0,255])); 
        PARCEL_FILL = new esri.Color([0,0,255,0.5]);
        PLOT_OUTLINE = new esri.Color(([255,0,0])); 
        PLOT_FILL = new esri.Color([255,0,0,0.5]);
    }

    function createToolbar() {
        toolbar = new esri.toolbars.Draw(map);     
    }

    function drawEnd(geometry, pType, outline, fill) {
        toolbar.deactivate();
        map.showZoomSlider();
        console.log("geometry: " + geometry.type);
        var text_symbol = null;
        switch (geometry.type) {
            case "point":
            case "multipoint":
              symbol = new esri.symbol.PictureMarkerSymbol(markerPictures[pType], 13, 13);
              break;
            default:
              symbol = new esri.symbol.SimpleFillSymbol();
              symbol.setColor(fill);
              symbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, outline, 2)); 
              break;
        }

        var graphic = new esri.Graphic(geometry, symbol);
        map.graphics.add(graphic);

        var map_obj = new MapObject(pType, pType, graphic, geometry.type);
        mapManager.Add(map_obj);

        if(toolbarEvent != null)
        {
            toolbarEvent.remove();
            toolbarEvent = null;
        }

    }

error happens specifically on this line:

dom.byId('upload-status').innerHTML = '<b>Loading </b>' + name;

JonathanUihlein · ‎06-24-2014

I don't see a div with an id of "upload-status" in your HTML.

MateenEsfahanian · ‎06-24-2014

when I added that line

<div class="modal fade" id="UpdateShapefileForm" tabindex="-1" role="dialog" aria-labelledby="Set View" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <div id="upload-status">
        <form enctype="multipart/form-data" method="post" id="uploadForm">
                          <div class="field">
                  <label class="file-upload">
                      <span><strong>Add File</strong></span>
                      <input type="file" name="file" id="inFile"/>
                  </label>
              </div>
            </div>
               </form>
              </div>
              </div>
              </div>
              </div>

I still get the dom error

JonathanUihlein · ‎06-24-2014

It looks like your generateFeatureCollection() function is outside of your require scope so dom is undefined, as the error states.

From our very first tutorial:

The global require() function (provided by Dojo) is used to load modules. Esri's JavaScript API is built on top of Dojo and relies on Dojo for its module system and other features like vector graphics and localization as well as a way to abstract away browser differences. For more information on the relationship between Dojo and the JavaScript API, see Working with Dojo and Why Dojo.

https://developers.arcgis.com/javascript/jstutorials/intro_firstmap_amd.html

You will want to read this documentation:
https://developers.arcgis.com/javascript/jshelp/inside_dojo.html