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));
}
});
});
