Draw and save graphics to a local file.

[ZachLiu1]

I am working on a project which includes a draw toolbar. However, I need to extend the tool to have the ability to save the graphics to a local file(text or csv), and the user can also open the file and display the stored graphics on the map.

So basically, I need to replicate the draw widget in Flex API.

What I am thinking now is when user click the save button, the JS code will store the graphics in a object. But I don't know how JavaScript can write the variable to a local file and also read it later, or if I need a server side script for the job.

Can anyone give some clues?

[TimCollyer]

As for reading the file...

If you are using a HTML5 compatible browser, you can do this using the File API (FileReader) and it's super simple.

You basically just do something like this

var file = dom.byId("uploadFile").files[0]; //where "uploadFile" is the id of your html file input
var reader = new FileReader();
var fileContent = reader.readAsText(file);
alert(fileContent);

http://www.html5rocks.com/en/tutorials/file/dndfiles/

If you're not using HTML5 (e.g. IE8) it's a bit (actually, much :p) trickier.

Because my site is on our corporate network I gave up on trying to actually read/upload the file using javascript and instead I worked around the problem by creating a network share where users can place their file for "upload". They then browse to that file using the html "file" input and my javascript function actually sends the path of the file to my server script which then reads the file from the share.

HTML

<input id="uploadFile" data-dojo-id="uploadFile" type="file"/>
<input type="button" data-dojo-id="uploadButton" type="dijit/form/Button" value="Load..." onClick="loadFile()"/>

Javascript

function loadFile() {    require(["dojo/dom", "dojo/request/xhr"], function(dom, xhr){


        xhr.post("<url to your server script>", {
            data: { filePath : dom.byId("uploadFile").value }            
        }).then(<callbackfunction>);
}

The using whatever server code you are using (java in my case), you use that filePath to read the file from the network share.