From 80b4e2243526abea55558abc13c448701b48321d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 Jan 2016 13:53:14 +0100
Subject: [PATCH] Cancel dragged invalid file with proper messaging

---
 .../ascribe_uploader/react_s3_fine_uploader.js | 18 ++++++++++++++----
 sass/ascribe_global_notification.scss          |  4 ++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index efd6c7b6..9c34dbbd 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -518,16 +518,26 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isFileValid(file) {
-        if (file.size > this.props.validation.sizeLimit) {
-            const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
+        let { validation, onValidationFailed } = this.props;
+
+        if (file.size > validation.sizeLimit) {
+            const fileSizeInMegaBytes = validation.sizeLimit / 1000000;
 
             const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
 
-            if (typeof this.props.onValidationFailed === 'function') {
-                this.props.onValidationFailed(file);
+            if (typeof onValidationFailed === 'function') {
+                onValidationFailed(file);
             }
 
+            return false;
+        } else if (validation.allowedExtensions.indexOf(file.type) === -1) {
+
+            const prettyAllowedExtensions = validation.allowedExtensions.join(', ');
+
+            const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${prettyAllowedExtensions}`), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
             return false;
         } else {
             return true;
diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index 5286a32c..dda29503 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -7,6 +7,8 @@
     position: fixed;
     transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
     width: 100%;
+
+    z-index: 9999;
 }
 
 .ascribe-global-notification-off {
@@ -37,6 +39,8 @@
     right: -50em;
     transition: 1s right ease;
 
+    z-index: 9999;
+
     > div {
         padding: .75em 1.5em;
     }