Drag and Drop Leaflet II: Send file or data to DB using Drag and Drop

29 Jul

Using Drag and Drop, I also wanted to be able to drag data – mostly a file – to a feature in my ESRI Geodatabase and have it sent to the DB. To test this, I just setup a marker in Leaflet to represent my feature. I attached a popup to this feature using an iframe.

<html>
<head>
<title></title>
<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css&#8221; />
<style>
#map{width:100%;height:100%}
</style>
</head>
<body>
<script src=”http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js”></script&gt;
<div id=”map” ></div>

<script>
var map = L.map(‘map’,
{
center: [35.10418, -106.62987],
zoom: 9
});
L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’).addTo(map);

var x =L.marker([35,-106]).addTo(map);
var image = iframe src=”http://dmdview/paul/drag.html&#8221; width=”300″ height=”300″ frameborder=”0″>/iframe ;

//had to modify the iframe tags to get it to display on the blog add <>

var popupContent = image;

x.bindPopup(popupContent);

</script>
</body>
</html>

 

The iframe loads the drag and drop functionality and puts a button in the popup that will call the function to send the file or data. This will use ESRI REST API to update, or send an attachment.

 

<html>
<head>
<title></title>
<style>
#drop_zone{
height: 100%;
width:100%;
}
</style>
</head>
<body>
<div id=”drop_zone” >Drag Data Here</div>
<script>
function go(){alert(“Submitted Data”);}

function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object.
var reader = new FileReader();
reader.onload = function(event) {

var text=event.target.result;
document.getElementById(‘drop_zone’).innerHTML=text+”<button onclick=’go()’>Send Text</button>”;

}
var s = reader.readAsText(files[0],”UTF-8″);

}

function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = ‘copy’; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById(‘drop_zone’);
dropZone.addEventListener(‘dragover’, handleDragOver, false);
dropZone.addEventListener(‘drop’, handleFileSelect, false);

</script>
</body>
</html>

the images show the popup and the popup after a text file is dropped on it. Drag and drop offers some cool possibilities, but I have really enjoyed connecting leaflet to ESRI’s ArcServer vie REST. At work, this has opened up my ability to build front-ends quickly.

12

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: