vfxdude
7/19/2017 - 11:37 AM

Folder Upload and file change watch. http://jsbin.com/nehebef

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>