javascript - dom is undefined error when trying to upload shapefile -

javascript - dom is undefined error when trying to upload shapefile -

i have been working on arcgis project lastly 2 weeks , have ran issue upload shapefile function in code. maintain getting dom undefined error , don't know do.

here 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 total path in ie extract file name var arr = filename.split("\\"); filename = arr[arr.length - 1]; } if (filename.indexof(".zip") !== -1) {//is file zip - if not notify user generatefeaturecollection(filename); } else { dom.byid('upload-status').innerhtml = '<p style="color:red">add shapefile .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 , ie add together c:\fakepath value - need remove //see link more info: http://davidwalsh.name/fakepath name = name[0].replace("c:\\fakepath\\", ""); dom.byid('upload-status').innerhtml = '<b>loading </b>' + name; //define input params generate see rest doc 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 display here generalize @ 1:40,000 approx 10 meters //this should work 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 rest generate operation generate feature collection 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 shapefile map , zoom feature collection extent //if want persist feature collection when reload browser store collection in //local storage serializing layer using featurelayer.tojson() see 'feature collection in local storage' sample //for illustration of how work 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 feature popup on click enable highlight , zoom featurelayer.on('click', function (event) { map.infowindow.setfeatures([event.graphic]); }); //change default symbol if desired. comment out , layer draw 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 on line:

dom.byid('upload-status').innerhtml = '<b>loading </b>' + name;

you've got simple scoping error - variable dom declared argument function:

require([...,"dojo/dom",...], function(...,dom,...) {...});

your next function declaration this:

function generatefeaturecollection (filename) { ... dom.byid(...); ... }

but variable dom not defined in function, can't utilize here. need either pass function:

function generatefeaturecollection (filename, dom) {...}

which gets clumsy if you're going pass around every function, assign dom variable in require function global variable, or redeclare need it. docs:

require(["dojo/dom"], function(dom){ // fetch node id="somenode" var node = dom.byid("somenode"); });

javascript html arcgis-js-api