add drag and drop and delete confirmation

frontend/src/upload.js

@@ -1,16 +1,18 @@
 const FileSender = require('./fileSender');
 
 $(document).ready(function() {
+  // reset copy button
   let copyBtn = $('#copy-btn');
   copyBtn.attr('disabled', false);
   copyBtn.html('Copy');
+
   $('#page-one').show();
   $('#file-list').hide();
   $('#upload-progress').hide();
   $('#share-link').hide();
 
+  // copy link to clipboard
   copyBtn.click(() => {
-    console.log('copied');
     var aux = document.createElement('input');
     aux.setAttribute('value', $('#link').attr('value'));
     document.body.appendChild(aux);
@@ -20,6 +22,8 @@ $(document).ready(function() {
     copyBtn.attr('disabled', true);
     copyBtn.html('Copied!');
   });
+
+  // link back to home page
   $('.send-new').click(() => {
     $('#page-one').show();
     $('#file-list').show();
@@ -29,25 +33,46 @@ $(document).ready(function() {
     copyBtn.html('Copy');
   });
 
-  let onChange = event => {
-    const file = event.target.files[0];
-
+  // on file upload by browse or drag & drop
+  window.onUpload = event => {
+    event.preventDefault();
+    let file = "";
+    if (event.type == "drop"){
+      file = event.dataTransfer.files[0];
+    } else {
+      file = event.target.files[0];
+    }
     let fileList = $('#uploaded-files');
     let row = document.createElement('tr');
     let name = document.createElement('td');
     let link = document.createElement('td');
     let expiry = document.createElement('td');
-
+    let del = document.createElement('td');
+    let btn = document.createElement('button');
+    let popupDiv = document.createElement('div');
+    let $popupText = $('<span>', {'class': 'popuptext'});
     let cellText = document.createTextNode(file.name);
+    let progress = document.createElement('p');
 
     name.appendChild(cellText);
 
-    let progress = document.createElement('p');
+    // create delete button
+    btn.innerHTML = 'x';
+    btn.classList.add('delete-btn');
 
+    // create popup
+    popupDiv.classList.add('popup');
+    $popupText.html("<span class='del-file'>Delete</span><span class='nvm'> Nevermind</span>");
+
+    // add data cells to table row
     row.appendChild(name);
     row.appendChild(link);
     row.appendChild(expiry);
-    fileList.append(row);
+    popupDiv.appendChild(btn);
+    $(popupDiv).append($popupText);
+    del.appendChild(popupDiv);
+    row.appendChild(del);
+    fileList.append(row); //add row to table
 
     const fileSender = new FileSender(file);
     fileSender.on('progress', percentComplete => {
@@ -62,25 +87,34 @@ $(document).ready(function() {
       $('#link').attr('value', url);
       link.innerHTML = url;
       localStorage.setItem(info.fileId, info.deleteToken);
-      let del = document.createElement('td');
-      let btn = document.createElement('button');
-      btn.innerHTML = 'x';
-      btn.classList.add('delete-btn');
-      btn.addEventListener('click', e => {
+
+      // delete file
+      console.log($popupText.first());
+      $popupText.find(".del-file").click(e => {
         FileSender.delete(
           info.fileId,
           localStorage.getItem(info.fileId)
         ).then(() => {
-          e.target.parentNode.parentNode.remove();
+          e.target.parentNode.parentNode.parentNode.parentNode.remove();
           localStorage.removeItem(info.fileId);
         });
       });
-      del.appendChild(btn);
-      row.appendChild(del);
+
+      // show popup
+      btn.addEventListener('click', e => {
+        $popupText.toggleClass('show');
+      });
+      // hide popup
+      $popupText.find(".nvm").click( e => {
+        $popupText.toggleClass('show');
+      });
       $('#upload-progress').hide();
       $('#share-link').show();
     });
   };
 
-  window.onChange = onChange;
+  window.allowDrop = function(ev) {
+    ev.preventDefault();
+  }
+
 });

public/main.css

@@ -28,7 +28,7 @@ input, select, textarea, button {
 .title {
   font-size: 14px;
   width: 80%;
-  margin: 50px auto;
+  margin: 40px auto;
   text-align: center;
 }
 
@@ -108,6 +108,59 @@ td {
   cursor: pointer;
 }
 
+/* Popup container */
+.popup {
+   position: relative;
+   display: inline-block;
+   cursor: pointer;
+}
+
+/* The actual popup (appears on top) */
+.popup .popuptext {
+   visibility: hidden;
+   width: 160px;
+   background-color: #555;
+   color: #fff;
+   text-align: center;
+   border-radius: 6px;
+   padding: 8px 0;
+   position: absolute;
+   z-index: 1;
+   bottom: 125%;
+   left: 50%;
+   margin-left: -80px;
+}
+
+/* Popup arrow */
+.popup .popuptext::after {
+   content: "";
+   position: absolute;
+   top: 100%;
+   left: 50%;
+   margin-left: -5px;
+   border-width: 5px;
+   border-style: solid;
+   border-color: #555 transparent transparent transparent;
+}
+
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+.popup .show {
+   visibility: visible;
+   -webkit-animation: fadeIn 1s;
+   animation: fadeIn 1s
+}
+
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+   from {opacity: 0;}
+   to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+   from {opacity: 0;}
+   to {opacity:1 ;}
+}
+
 /**   upload-progress   **/
 
 

views/index.handlebars

@@ -14,7 +14,7 @@
       <div class="title">
         Share your files quickly, privately and securely.
       </div>
-      <div class="upload-window">
+      <div class="upload-window" ondrop="onUpload(event)" ondragover="allowDrop(event)">
         <div id="upload-img"><img src="/resources/upload.svg"/></div>
         <div>
           DRAG &amp; DROP
@@ -26,7 +26,7 @@
           <div id="browse">
             <form method="post" action="upload" enctype="multipart/form-data">
               <label for="file-upload" class="file-upload">browse</label>
-              <input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
+              <input id="file-upload" type="file" onchange="onUpload(event)" name="fileUploaded" />
             </form>
           </div>
         </div>
@@ -41,7 +41,9 @@
           <th width=18%>Expires in</th>
           <th width=7%>Delete</th>
         </tr>
-        <div data-role="popup" id="popupArrow" data-arrow="true">
+        <!-- <div class="popup">
+          <span class="popuptext" id="myPopup">Popup text...</span>
+        </div> -->
       </table>
     </div>