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);