Folder Upload and file change watch. http://jsbin.com/nehebef
"use strict";
var dropzone = document.getElementById("dropzone");
var lastMod = {};
var watcher;
dropzone.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
var items = event.dataTransfer.items;
for (var i = 0; i < items.length; i++) {
var entry = items[i].webkitGetAsEntry();
if (entry) {
traverse(entry);
watcher = setInterval(function () {
return traverse(entry, '', true);
}, 2000);
}
}
}, false);
dropzone.ondragover = function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
};
function traverse(entry, path) {
var watch = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
path = path || "";
if (entry.isFile) {
// Get file
entry.file(function (file) {
var key = (path + file.name).replace(/ /g, '');
if (watch) {
if (lastMod[key] && file.lastModifiedDate.getTime() !== lastMod[key].getTime()) {
display("File changed:" + file.name);
lastMod[key] = file.lastModifiedDate;
}
} else {
display("File:" + file.name);
lastMod[key] = file.lastModifiedDate;
}
});
} else if (entry.isDirectory) {
// Get folder contents
var dirReader = entry.createReader();
dirReader.readEntries(function (entries) {
for (var i = 0; i < entries.length; i++) {
traverse(entries[i], path + entry.name + "/", watch);
}
});
}
}
document.getElementById('stop_watching').addEventListener('click', function () {
return clearInterval(watcher);
}, false);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
#dropzone {
height: 200px;
border: 5px dashed;
margin: 1em 0;
padding: 10px;
}
h1 {
font-size: 24px;
}
<style id="jsbin-css">
#dropzone {
height: 200px;
border: 5px dashed;
margin: 1em 0;
padding: 10px;
}
h1 {
font-size: 24px;
}
</style>
<h1>Folder Upload and file change watch</h1>
<div id="dropzone">drop files or folders here.</div>
<button id="stop_watching">Stop Watching</button>
<!-- Folder upload source: https://codepen.io/MicrosoftEdgeDocumentation/pen/wWwBqa?editors=1010 -->
<script id="jsbin-javascript">
"use strict";
var dropzone = document.getElementById("dropzone");
var lastMod = {};
var watcher;
dropzone.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
var items = event.dataTransfer.items;
for (var i = 0; i < items.length; i++) {
var entry = items[i].webkitGetAsEntry();
if (entry) {
traverse(entry);
watcher = setInterval(function () {
return traverse(entry, '', true);
}, 2000);
}
}
}, false);
dropzone.ondragover = function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
};
function traverse(entry, path) {
var watch = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
path = path || "";
if (entry.isFile) {
// Get file
entry.file(function (file) {
var key = (path + file.name).replace(/ /g, '');
if (watch) {
if (lastMod[key] && file.lastModifiedDate.getTime() !== lastMod[key].getTime()) {
display("File changed:" + file.name);
lastMod[key] = file.lastModifiedDate;
}
} else {
display("File:" + file.name);
lastMod[key] = file.lastModifiedDate;
}
});
} else if (entry.isDirectory) {
// Get folder contents
var dirReader = entry.createReader();
dirReader.readEntries(function (entries) {
for (var i = 0; i < entries.length; i++) {
traverse(entries[i], path + entry.name + "/", watch);
}
});
}
}
document.getElementById('stop_watching').addEventListener('click', function () {
return clearInterval(watcher);
}, false);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
</script>
<script id="jsbin-source-html" type="text/html"><h1>Folder Upload and file change watch</h1>
<div id="dropzone">drop files or folders here.</div>
<button id="stop_watching">Stop Watching</button>
<\!-- source: https://codepen.io/MicrosoftEdgeDocumentation/pen/wWwBqa?editors=1010 -->
</script>
<script id="jsbin-source-css" type="text/css">#dropzone {
height: 200px;
border: 5px dashed;
margin: 1em 0;
padding: 10px;
}
h1 {
font-size: 24px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var dropzone = document.getElementById("dropzone");
var lastMod = {};
var watcher;
dropzone.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
var items = event.dataTransfer.items;
for (var i = 0; i < items.length; i++) {
var entry = items[i].webkitGetAsEntry();
if (entry) {
traverse(entry);
watcher = setInterval( ()=>traverse(entry,'',true), 2000 );
}
}
}, false);
dropzone.ondragover = function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function traverse(entry, path, watch = false) {
path = path || "";
if (entry.isFile) {
// Get file
entry.file(function(file) {
var key = (path+file.name).replace(/ /g,'');
if ( watch ) {
if ( lastMod[key] && file.lastModifiedDate.getTime() !== lastMod[key].getTime() ) {
display("File changed:"+ file.name);
lastMod[key] = file.lastModifiedDate;
}
}
else {
display("File:"+ file.name);
lastMod[key] = file.lastModifiedDate;
}
});
} else if (entry.isDirectory) {
// Get folder contents
var dirReader = entry.createReader();
dirReader.readEntries(function(entries) {
for (var i = 0; i < entries.length; i++) {
traverse(entries[i], path + entry.name + "/", watch);
}
});
}
}
document.getElementById('stop_watching').addEventListener('click', ()=>clearInterval(watcher), false);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}</script>