Add Shapefile code - Why all shapefile features shows the same location on map?

[MayurDodiya]

I am developing the JS app using 3.15. I have tried this code in my app Add Shapefile  from the esri samples here

Add shapefile | ArcGIS API for JavaScript

but shapefile features added at the same location on map.If the polygon features it shows square but not the actual shape of the polygon.

My map intialextent and Spatialreference for basemap are

var initialExtent = new esri.geometry.Extent({
  "xmin": 51.53195000000005,
  "ymin": 22.62777042700003,
  "xmax": 56.01812603400003,
  "ymax": 25.164240001000053,
  "spatialReference": {
  "wkid": 4326
  }
});

map = new Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), zoom: 2, logo: false });

map.addLayer(_baseMap);

and code for add shapefile is following and attahced is the screenshot of result all features are at same location.

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

//var form = dom.byId("uploadFormShapefile");
// on(form, "form:click", function (event) {
on(dom.byId("uploadFormShapefile"), "change", function (event) {
  debugger;
  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
  generateFeatureCollectionShapeFile(fileName);
  }
  else {
  dom.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>';
  }
});

function generateFeatureCollectionShapeFile(fileName) {
  debugger;
  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 = esri.geometry.getExtentForScale(map, 40000);
  //var extent = scaleUtils.getExtentForScale(map, 40000); //new esri.geometry.geographicToWebMercator(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('uploadFormShapefile'),
  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) {
  debugger;
  dom.byId('upload-status').innerHTML =
  "<p style='color:red'>" + error.message + "</p>";
}
function addShapefileToMap(featureCollection) {
  debugger;
  //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
  changeRenderer(featureLayer);
  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 changeRenderer(layer) {
  //change the default symbol for the feature collection for polygons and points
  var symbol = null;
  switch (layer.geometryType) {
  case 'esriGeometryPoint':
  symbol = new PictureMarkerSymbol({
  'angle': 0,
  'xoffset': 0,
  'yoffset': 0,
  'type': 'esriPMS',
  'url': 'images/BluePin1LargeB.png',
  'contentType': 'image/png',
  'width': 20,
  'height': 20
  });
  break;
  case 'esriGeometryPolygon':
  symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
  new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
  new Color([112, 112, 112]), 1), new Color([136, 136, 136, 0.25]));
  break;
  }
  if (symbol) {
  layer.setRenderer(new SimpleRenderer(symbol));
  }
}

[Ronald_GuiovanniVenegas_Pulido]

Hi. I was looking for the answer to this question. I don't know if someone else have this problem right now, but i hope that this answer can help with this problem. To fix that, you need to change params.numberOfDigitsAfterDecimal = 0; to params.numberOfDigitsAfterDecimal = 14; or another value according of your configuration. Just with that change I was able to fix this problem. I hope this can help