Merge pull request #168 from mozilla/ui

Show error page if upload fails

frontend/src/fileSender.js

@@ -51,6 +51,9 @@ class FileSender extends EventEmitter {
         reader.onload = function(event) {
           resolve(new Uint8Array(this.result));
         };
+        reader.onerror = function(err) {
+          reject(err);
+        };
       })
     ])
       .then(([secretKey, plaintext]) => {

frontend/src/upload.js

@@ -2,6 +2,8 @@ const FileSender = require('./fileSender');
 const { notify } = require('./utils');
 const $ = require('jquery');
 
+const Raven = window.Raven;
+
 $(document).ready(function() {
   // reset copy button
   const $copyBtn = $('#copy-btn');
@@ -12,6 +14,7 @@ $(document).ready(function() {
   $('#file-list').show();
   $('#upload-progress').hide();
   $('#share-link').hide();
+  $('#upload-error').hide();
 
   if (localStorage.length === 0) {
     toggleHeader();
@@ -46,6 +49,7 @@ $(document).ready(function() {
     $('#file-list').show();
     $('#upload-progress').hide();
     $('#share-link').hide();
+    $('#upload-error').hide();
     $copyBtn.attr('disabled', false);
     $copyBtn.html('Copy');
   });
@@ -66,6 +70,7 @@ $(document).ready(function() {
       $('#page-one').hide();
       $('#file-list').hide();
       $('#upload-progress').show();
+      $('#upload-error').hide();
       $('#upload-filename').innerHTML += file.name;
       // update progress bar
       document
@@ -73,28 +78,36 @@ $(document).ready(function() {
         .style.setProperty('--progress', percentComplete + '%');
       $('#progress-text').html(`${percentComplete}%`);
     });
-    fileSender.upload().then(info => {
-      const url = info.url.trim() + `#${info.secretKey}`.trim();
-      $('#link').attr('value', url);
-      const fileData = {
-        name: file.name,
-        fileId: info.fileId,
-        url: info.url,
-        secretKey: info.secretKey,
-        deleteToken: info.deleteToken,
-        creationDate: new Date(),
-        expiry: expiration
-      };
-      localStorage.setItem(info.fileId, JSON.stringify(fileData));
+    fileSender
+      .upload()
+      .then(info => {
+        const url = info.url.trim() + `#${info.secretKey}`.trim();
+        $('#link').attr('value', url);
+        const fileData = {
+          name: file.name,
+          fileId: info.fileId,
+          url: info.url,
+          secretKey: info.secretKey,
+          deleteToken: info.deleteToken,
+          creationDate: new Date(),
+          expiry: expiration
+        };
+        localStorage.setItem(info.fileId, JSON.stringify(fileData));
 
-      $('#page-one').hide();
-      $('#file-list').hide();
-      $('#upload-progress').hide();
-      $('#share-link').show();
+        $('#page-one').hide();
+        $('#file-list').hide();
+        $('#upload-progress').hide();
+        $('#share-link').show();
+        $('#upload-error').hide();
 
-      populateFileList(JSON.stringify(fileData));
-      notify('Your upload has finished.');
-    });
+        populateFileList(JSON.stringify(fileData));
+        notify('Your upload has finished.');
+      })
+      .catch(err => {
+        Raven.captureException(err);
+        $('#page-one').hide();
+        $('#upload-error').show();
+      });
   };
 
   window.allowDrop = function(ev) {

views/index.handlebars

@@ -89,6 +89,17 @@
         Send another file
       </div>
     </div>
+
+    <div id="upload-error">
+      <div class="title">
+        Upload error<br>
+        This file cannot be uploaded!
+      </div>
+      <div class="send-new">
+        Send another file
+      </div>
+    </div>
+
   </div>
 
 </body>