Merge pull request #71 from mozilla/ui

Drag & drop

frontend/src/fileSender.js

@@ -11,7 +11,7 @@ class FileSender extends EventEmitter {
   static delete(fileId, token) {
     return new Promise((resolve, reject) => {
       if (!fileId || !token) {
-        return resolve();
+        return reject();
       }
       let xhr = new XMLHttpRequest();
       xhr.open('post', '/delete/' + fileId, true);

frontend/src/upload.js

@@ -2,16 +2,18 @@ const FileSender = require('./fileSender');
 const $ = require('jquery');
 
 $(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);
@@ -21,6 +23,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();
@@ -30,25 +34,48 @@ $(document).ready(function() {
     copyBtn.html('Copy');
   });
 
-  let onChange = event => {
-    const file = event.target.files[0];
-
-    let fileList = $('#uploaded-files');
+  // 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 => {
@@ -63,25 +90,33 @@ $(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
+      $popupText.find('.del-file').click(e => {
         FileSender.delete(
           info.fileId,
           localStorage.getItem(info.fileId)
        ).then(() => {
-          e.target.parentNode.parentNode.remove();
+          //
+          $(e.target).parents('tr').remove();
           localStorage.removeItem(info.fileId);
         });
       });
-      del.appendChild(btn);
-      row.appendChild(del);
+
+      // show popup
+      btn.addEventListener('click', toggleShow);
+      // hide popup
+      $popupText.find('.nvm').click(toggleShow);
       $('#upload-progress').hide();
       $('#share-link').show();
     });
+
+    function toggleShow(){
+      $popupText.toggleClass('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,49 @@ 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;
+   transition: opacity 0.5s;
+   opacity: 0;
+}
+
+/* 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;
+}
+
+.popup .show {
+   visibility: visible;
+   opacity: 1;
+}
+
 /**   upload-progress   **/
 
 

server/portal_server.js

@@ -108,6 +108,7 @@ app.post('/delete/:id', (req, res) => {
     .then(err => {
       if (!err) {
         log.info('Deleted:', id);
+        res.sendStatus(200);
       }
     })
     .catch(err => res.sendStatus(404));

views/download.handlebars

@@ -13,11 +13,10 @@
     <div id="download">
       {{#if filename}}
       <div class="title">
-        Your friend is sending you a file:
+        Your friend is sending you a file: <br>
+        {{{filename}}} ({{{filesize}}})
       </div>
 
-      <span> {{{filename}}} ({{{filesize}}})
-
       <div class="share-window">
         <button id="download-btn" onclick="download()">Download File</button>
         <img id="expired-img" src="/resources/link_expired.png"/>

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,6 @@
           <th width=18%>Expires in</th>
           <th width=7%>Delete</th>
         </tr>
-        <div data-role="popup" id="popupArrow" data-arrow="true">
       </table>
     </div>