Skip to content

Instantly share code, notes, and snippets.

@placenamehere

placenamehere/Dropping Files.html

Created January 22, 2013 05:17
Show Gist options
  • Save placenamehere/4592275 to your computer and use it in GitHub Desktop.
Save placenamehere/4592275 to your computer and use it in GitHub Desktop.
Download ZIP
Dissecting Gmail's Email Attachments Examples for Web Standards Sherpa Article by Nicholas Zakas
Raw
Dropping Files.html
<!DOCTYPE>
<html>
<head>
<title>Dissecting Gmail's Email Attachments - Dropping Files</title>
<style>
.msg {
display: none
}
.dragging .msg {
display: block
}
#droptarget {
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="droptarget">
</div>
<div class="msg">
drag detected, now drop your files in the green #droptarget area
</div>
<script>
function handleDrag(event) {
event.preventDefault();
switch(event.type) {
case "dragenter":
document.body.className = "dragging";
break;
case "dragover":
// do anything else you may need
break;
case "dragleave":
document.body.className = "";
break;
case "drop":
if (event.target.id == "droptarget") {
console.log("Dropped %d files", event.dataTransfer.files.length);
}
break;
}
}
document.addEventListener("dragenter", handleDrag, false);
document.addEventListener("dragover", handleDrag, false);
document.addEventListener("dragleave", handleDrag, false);
document.addEventListener("drop", handleDrag, false);
</script>
</body>
Raw
HTML5 Drag-and-Drop.html
<!DOCTYPE>
<html>
<head>
<title>Dissecting Gmail's Email Attachments - HTML5 Drag-and-Drop</title>
<style>
.msg {
display: none
}
.dragging .msg {
display: block
}
</style>
</head>
<body>
<div class="msg">
drag detected
</div>
<script>
function handleDrag(event) {
event.preventDefault();
switch(event.type) {
case "dragenter":
document.body.className = "dragging";
break;
case "dragover":
// do anything else you may need
break;
case "dragleave":
document.body.className = "";
break;
}
}
document.addEventListener("dragenter", handleDrag, false);
document.addEventListener("dragover", handleDrag, false);
document.addEventListener("dragleave", handleDrag, false);
</script>
</body>
Raw
Monitoring Upload Progress.html
<!DOCTYPE>
<html>
<head>
<title>Dissecting Gmail's Email Attachments - Monitoring Upload Progress</title>
<style>
.msg {
display: none
}
.dragging .msg {
display: block
}
#droptarget {
height: 100px;
background: green;
}
/* style prgress bar */
.progress-container {
width: 300px;
}
#progress {
background: navy;
height: 100%;
width: 0;
}
</style>
</head>
<body>
<div id="droptarget">
</div>
<div class="progress-container">
<div id="progress"></div>
</div>
<div class="msg">
drag detected, now drop your files in the green #droptarget area
</div>
<script>
function uploadFiles(files) {
var data = new FormData();
for (var i=0, len=files.length; i < len; i++) {
data.append("File" + i, files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open("post", "/files", true);
xhr.onload = function() {
switch(this.status) {
case 200: // request complete and successful
console.log("Files uploaded"); //debug purposes
break;
default: // request complete but with unexpected response
console.log("Files not uploaded"); //debug purposes
}
};
xhr.onprogress = function(event) {
var percentage = event.loaded / event.total * 100;
// update progressbar width
var element = document.getElementById("progress");
progress.style.width = percentage + "%";
};
xhr.send(data);
}
function handleDrag(event) {
event.preventDefault();
switch(event.type) {
case "dragenter":
document.body.className = "dragging";
break;
case "dragover":
// do anything else you may need
break;
case "dragleave":
document.body.className = "";
break;
case "drop":
if (event.target.id == "droptarget") {
uploadFiles(event.dataTransfer.files);
}
break;
}
}
document.addEventListener("dragenter", handleDrag, false);
document.addEventListener("dragover", handleDrag, false);
document.addEventListener("dragleave", handleDrag, false);
document.addEventListener("drop", handleDrag, false);
</script>
</body>
Raw
Uploading the File.html
<!DOCTYPE>
<html>
<head>
<title>Dissecting Gmail's Email Attachments - Uploading the File</title>
<style>
.msg {
display: none
}
.dragging .msg {
display: block
}
#droptarget {
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="droptarget">
</div>
<div class="msg">
drag detected, now drop your files in the green #droptarget area
</div>
<script>
function uploadFiles(files) {
var data = new FormData();
for (var i=0, len=files.length; i < len; i++) {
data.append("File" + i, files[i]);
}
var xhr = new XMLHttpRequest();
xhr.open("post", "/files", true);
xhr.onload = function() {
switch(this.status) {
case 200: // request complete and successful
console.log("Files uploaded"); //debug purposes
break;
default: // request complete but with unexpected response
console.log("Files not uploaded"); //debug purposes
}
};
xhr.send(data);
}
function handleDrag(event) {
event.preventDefault();
switch(event.type) {
case "dragenter":
document.body.className = "dragging";
break;
case "dragover":
// do anything else you may need
break;
case "dragleave":
document.body.className = "";
break;
case "drop":
if (event.target.id == "droptarget") {
uploadFiles(event.dataTransfer.files);
}
break;
}
}
document.addEventListener("dragenter", handleDrag, false);
document.addEventListener("dragover", handleDrag, false);
document.addEventListener("dragleave", handleDrag, false);
document.addEventListener("drop", handleDrag, false);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment