Local csv file upload to csv layer of esri arcgis javascript api 4.12

[AminBangash]

Hi,
I am working on esri arcgis javascript angular based project, how to add local csv file to url property of csv layer, i did it with file://... but csvlayer is not rendering on map. can anybody have idea how to do that.

[andygup]

@AminBangash since your question is about the ArcGIS API for JavaScript it's best to post those questions on GeoNET: https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript.

For referencing a local file you need a url such as: https://localhost/test.csv. I believe you'll also need a valid SSL certificate or you'll get an error.

Another option is to host your csv in a github repo for testing purposes.

[Edit]

One other option for testing is to use a simple CSV string as shown in this codepen: https://codepen.io/andygup/pen/LYGRqYj?editors=1000

[AminBangash]

@AminBangash since your question is about the ArcGIS API for JavaScript it's best to post those questions on GeoNET: https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript.

For referencing a local file you need a url such as: https://localhost/test.csv. I believe you'll also need a valid SSL certificate or you'll get an error.

Another option is to host your csv in a github repo for testing purposes.

[Edit]

One other option for testing is to use a simple CSV string as shown in this codepen: https://codepen.io/andygup/pen/LYGRqYj?editors=1000

thanks andy for your response, but my file is located inside a local drive like C: or D: so i can't use http as it is for a server.

[AminBangash]

my url is like for csvlayer on local c:drive, i.e
csvUrl="file://C:Users\Desktop\test.csv"

let csv =new CSVLayer({
url: csvUrl,
renderer: csvRenderer //for drawing point
})
map.add(csv)

[andygup]

Hey @AminBangash yes, you'll need to use the same approach as demonstrated in the codepen above: create a blob from the file input and use that value in the CSVLayer.url property. Here's another codepen that demonstrates the concept: https://codepen.io/andygup/pen/KKVNXGV?editors=1000.

To test it, create a test.csv file using this data:

time,latitude,longitude,desc
2019-06-28T11:17:31.734Z,39.0,-104.8409,'test'

[AminBangash]

Hey @AminBangash yes, you'll need to use the same approach as demonstrated in the codepen above: create a blob from the file input and use that value in the CSVLayer.url property. Here's another codepen that demonstrates the concept: https://codepen.io/andygup/pen/KKVNXGV?editors=1000.

To test it, create a test.csv file using this data:

time,latitude,longitude,desc
2019-06-28T11:17:31.734Z,39.0,-104.8409,'test'

Thank you very much @andygup you make my day. :)

[AminBangash]

Hey @andygup if i have to upload multiple files, will it plot like that?

[andygup]

Not automatically, you'll need to write the code to handle that.

I'm going to close this issue @AminBangash since the original question has been answered and it's not related to Angular. If you have follow-up questions related to JavaScript and the ArcGIS API for JavaScript the best place to post them is on GeoNET.

Please note: this repository is now retired and will soon be archived. It's been replaced by modern alternatives - more info can be found here.

[AminBangash]

Not automatically, you'll need to write the code to handle that.

I'm going to close this issue @AminBangash since the original question has been answered and it's not related to Angular. If you have follow-up questions related to JavaScript and the ArcGIS API for JavaScript the best place to post them is on GeoNET.

Please note: this repository is now retired and will soon be archived. It's been replaced by modern alternatives - more info can be found here.

Thanks @andy for your help. I have posted my question there.