AnsweredAssumed Answered

add csv file custom widget

Question asked by zhangj_neorsd on Dec 11, 2015
Latest reply on Dec 15, 2015 by zhangj_neorsd

Hello,

 

I am trying to create a custom widget AddCSVfile using the code i found on

Drag and drop to display data | ArcGIS API for JavaScript   to upload a csv file and then plot the points to the map.  Following is the code for widget.js i am working on, I keep getting http://machinename.domain:3344/webappbuilder/apps/widgets/AddCSVfile/reflect.ashx 404 (Not Found). Although when i am able to access http://machinename.domain:3344/webappbuilder/apps/widgets/AddCSVfile/reflect.ashx from the browser.

 

Any help is appreciated!

Jin

 

define([

  'dojo/_base/declare',

  'jimu/BaseWidget',

  "esri/config",

  "esri/domUtils",

  "esri/graphic",

  "esri/InfoTemplate",

  "esri/map",

  "esri/request",

  "esri/urlUtils",

  "esri/dijit/InfoWindowLite",

  "esri/geometry/Multipoint",

  "esri/geometry/Point",

  "esri/geometry/webMercatorUtils",

  "esri/layers/ArcGISDynamicMapServiceLayer",

  "esri/layers/ArcGISImageServiceLayer",

  "esri/layers/FeatureLayer",

  "esri/symbols/PictureMarkerSymbol",

  "dojo/dom",

  "dojo/dom-construct",

  "dojo/json",

  "dojo/on",

  "dojo/parser",

  "dojo/_base/array",

  "dojo/_base/lang",

  "dojox/data/CsvStore",

  "dojox/encoding/base64",

  "dijit/Dialog",

  "dijit/layout/BorderContainer",

  "dijit/layout/ContentPane",

  "dojo/domReady!",

  'esri/Color',

  'dojo/sniff'

  ],

  function (

  declare,

  BaseWidget,

  esriConfig,

  domUtils,

  Graphic,

  InfoTemplate,

  Map,

  request,

  urlUtils,

  InfoWindowLite,

  Multipoint,

  Point,

  webMercatorUtils,

  ArcGISDynamicMapServiceLayer,

  ArcGISImageServiceLayer,

  FeatureLayer,

  PictureMarkerSymbol,

  dom,

  domConstruct,

  JSON, on, parser, arrayUtils, lang, CsvStore, base64,

  sniff) {

  return declare([BaseWidget], {

 

 

  baseClass : 'jimu-widget-addcsvfile',

  portalUrl : 'http://www.arcgis.com',

  arrayFeatureLayer : null,

 

  startup : function () {

  this.inherited(arguments);

        esriConfig.defaults.io.corsEnabledServers.push("serverapi.arcgisonline.com");

        esriConfig.defaults.io.proxyUrl = 'http://serverapi.arcgisonline.com/proxy/proxy.ashx';

  on(this.uploadForm, "change", lang.hitch(this, function (event) {

  var fileName = event.target.value.toLowerCase();

  this.arrayFeatureLayer = [];

 

 

  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(".csv") !== -1) { //is file a zip - if not notify user

  this.uploadFile(this.files);

 

 

  } else {

  this.uploadstatus.innerHTML = '<p style="color:red">Add a .csv file</p>';

  }

 

 

  }));

  },

 

 

  onOpen : function () {

  console.log('onOpen');

  },

  onClose : function () {

  console.log('onClose');

  },

  onRemoveCSVfile : function (evt) {

  if (this.arrayFeatureLayer.length > 0) {

  arrayUtils.forEach(this.arrayFeatureLayer, function (currFeatureLayer) {

  this.map.removeLayer(currFeatureLayer);

  }, this);

  }

  },

  uploadFile : function (files) {

  if (files && files.length === 1) {

  console.log("handle files");

  handleCSV(files[0]);

  } else {

  this.uploadstatus.innerHTML = '<p style="color:blue">Uploading…</p>';

  request({

  url : "widgets/AddCSVfile/reflect.ashx",

  form : this.uploadForm,

  load : this.requestSucceeded,

  error : this.requestFailed

  });

  }

  },

 

  handleCSV : function (file) {

  console.log("Processing CSV: ", file, ", ", file.name, ", ", file.type, ", ", file.size);

  if (file.file) {

  var decoded = bytesToString(base64.decode(file.data));

  processCSVData(decoded);

  } else {

  var reader = new FileReader();

  reader.onload = function () {

  console.log("Finished reading CSV data");

  processCSVData(reader.result);

  };

  reader.readAsText(file);

  }

  },

 

  requestSucceeded : function (response) {

  this.uploadstatus.innerHTML = '<p style="color:blue">Upload success…</p>';

  this.handleCSV(response);

  },

 

 

  requestFailed : function (error) {

  //this.uploadstatus.innerHTML = '<p style="color:blue">unable to upload</p>';

       console.log(JSON.stringify(error));

     }

 

 

  });

  });

Outcomes