Create super basic drag/drop UI.

11 years ago · 56d4b4a9c8
parent 779b826d74
commit 56d4b4a9c8
3 changed files with 68 additions and 0 deletions
--- a/client/index.css
+++ b/client/index.css
@ -0,0 +1,10 @@
 #drop_zone {
  border: 1.5px solid #bbb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font: 20pt 'Helvetica-Light';
  color: #bbb;
 }
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,10 @@
 <head>
  <link rel="stylesheet" href="index.css">
 </head>
 <body>
  <div id="drop_zone">Drop Files Here</div>
  <output id="list"></output>
 </body>
 <script src="index.js"></script>
--- a/client/index.js
+++ b/client/index.js
@ -0,0 +1,48 @@
 var files = []
 function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  files = evt.dataTransfer.files; // FileList object.
  // files is a FileList of File objects. List some properties.
  var output = [];
      metadata = [];
  for (var i = 0, file; file = files[i]; i++) {
    output.push('<li><strong>', escape(file.name), '</strong> (', file.type || 'n/a', ') - ',
                file.size, ' bytes, last modified: ',
                file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a',
                '</li>');
    var metadaton = {"name":escape(file.name),
                     "size":file.size,
                     "type":file.type || 'n/a',
                     "crc" :""}
    metadata.push(metadaton)
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  // post metadata to server
 }
 function send() { // perhaps need params for peer id or something
  for (var i = 0, file; f = files[i]; i++) {
    for (var bytes = 0; bytes <= file.size; bytes += 1200) {
      endingByte = bytes+1200
      if (endingByte > file.size) {
        endingByte = file.size
      }
      var blob = file.slice(bytes, endingByte);
      // send blob
    }
  }
 }
 function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
 }
 var dropZone = document.getElementById('drop_zone');
 dropZone.addEventListener('dragover', handleDragOver, false);
 dropZone.addEventListener('drop', handleFileSelect, false);