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();
+  }
+
 });