Drag and Drop CSV and SHP files onto map

Question

Does anyone know of a way to drag and drop CSV, SHP, and JSON files onto a map using the 4.x versions of the JavaScript API? I found this sample code for 3.x (legacy version - https://developers.arcgis.com/javascript/3/jssamples/exp_dragdrop.html) but I am using 4.x for all of my maps and would prefer to stick with that, if possible.

It doesn't necessarily have to be drag and drop, but I need the same functionality where the user can upload a data file (either CSV, SHP, or JSON), the data is read in and displayed onto the map.

This example I found works for zipped SHP files and uses the generate REST tool: https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-shapefile/. I tried doing the same for CSV files with some tweaking - it requires the Analyze REST tool to be run first to get the publish parameters and then generate for the feature collection (https://developers.arcgis.com/rest/users-groups-and-items/analyze.htm). I am getting a '414 URI Too Long' error from using the publish parameters (returns a very long JSON object) and not sure how to fix this.

Any advice is appreciated or if you have a better approach, please point me in the right direction.

ranico · Answer

Thank you! This is a really neat tool. Looking into the code though, I'm not sure how I'm supposed to implement the same drag and drop functionality from there code into my code base. It looks like a whole package whereas I really just need the ability to parse a csv file a user uploads into a feature collection that can be displayed on the map (like this one does with shapefiles: https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-shapefile/). I'm going to create a separate post in the REST api question community because my current approach would be preferred if I can find a fix for the URI being too long.

AnneFitz · Answer

This Hurricane Explorer showcase application demonstrates how you can do this!

App: https://ycabon.github.io/2018-devsummit-plenary/2-hurricanes.html

Code: https://github.com/ycabon/2018-devsummit-plenary/blob/gh-pages/src/2-hurricanes/application.ts