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,7 +78,9 @@ $(document).ready(function() {
         .style.setProperty('--progress', percentComplete + '%');
       $('#progress-text').html(`${percentComplete}%`);
     });
-    fileSender.upload().then(info => {
+    fileSender
+      .upload()
+      .then(info => {
         const url = info.url.trim() + `#${info.secretKey}`.trim();
         $('#link').attr('value', url);
         const fileData = {
@@ -91,9 +98,15 @@ $(document).ready(function() {
         $('#file-list').hide();
         $('#upload-progress').hide();
         $('#share-link').show();
+        $('#upload-error').hide();
 
         populateFileList(JSON.stringify(fileData));
         notify('Your upload has finished.');
+      })
+      .catch(err => {
+        Raven.captureException(err);
+        $('#page-one').hide();
+        $('#upload-error').show();
       });
   };
 

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>