Improved error messages for image uploads and formatted much js

[bookstack] / resources / assets / js / directives.js

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 4e936388b51f6840655551b0963d5c3cda74aa71..758f16cd2c5fdc75c4481cdf449e53f795c46572 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -5,25 +5,25 @@ var toggleSwitchTemplate = require('./components/toggle-switch.html');
 var imagePickerTemplate = require('./components/image-picker.html');
 var dropZoneTemplate = require('./components/drop-zone.html');
 
-module.exports = function(ngApp) {
+module.exports = function (ngApp) {
 
     /**
      * Toggle Switches
      * Has basic on/off functionality.
      * Use string values of 'true' & 'false' to dictate the current state.
      */
-    ngApp.directive('toggleSwitch', function() {
+    ngApp.directive('toggleSwitch', function () {
         return {
             restrict: 'E',
             template: toggleSwitchTemplate,
             scope: true,
-            link: function(scope, element, attrs) {
+            link: function (scope, element, attrs) {
                 scope.name = attrs.name;
                 scope.value = attrs.value;
                 scope.isActive = scope.value == true && scope.value != 'false';
                 scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
 
-                scope.switch = function() {
+                scope.switch = function () {
                     scope.isActive = !scope.isActive;
                     scope.value = scope.isActive ? 'true' : 'false';
                 }
@@ -37,7 +37,7 @@ module.exports = function(ngApp) {
      * Image Picker
      * Is a simple front-end interface that connects to an ImageManager if present.
      */
-    ngApp.directive('imagePicker', ['$http', 'imageManagerService', function($http, imageManagerService) {
+    ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
         return {
             restrict: 'E',
             template: imagePickerTemplate,
@@ -52,7 +52,7 @@ module.exports = function(ngApp) {
                 defaultImage: '@',
                 imageClass: '@'
             },
-            link: function(scope, element, attrs) {
+            link: function (scope, element, attrs) {
                 var usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
                 scope.image = scope.currentImage;
                 scope.value = scope.currentImage || '';
@@ -62,22 +62,22 @@ module.exports = function(ngApp) {
                     scope.value = usingIds ? imageModel.id : imageUrl;
                 }
 
-                scope.reset = function() {
+                scope.reset = function () {
                     setImage({id: 0}, scope.defaultImage);
                 };
 
-                scope.remove = function() {
+                scope.remove = function () {
                     scope.image = 'none';
                     scope.value = 'none';
                 };
 
-                scope.showImageManager = function() {
+                scope.showImageManager = function () {
                     imageManagerService.show((image) => {
                         scope.updateImageFromModel(image);
                     });
                 };
 
-                scope.updateImageFromModel = function(model) {
+                scope.updateImageFromModel = function (model) {
                     var isResized = scope.resizeWidth && scope.resizeHeight;
 
                     if (!isResized) {
@@ -102,7 +102,7 @@ module.exports = function(ngApp) {
      * DropZone
      * Used for uploading images
      */
-    ngApp.directive('dropZone', [function() {
+    ngApp.directive('dropZone', [function () {
         return {
             restrict: 'E',
             template: dropZoneTemplate,
@@ -111,26 +111,32 @@ module.exports = function(ngApp) {
                 eventSuccess: '=',
                 eventError: '='
             },
-            link: function(scope, element, attrs) {
+            link: function (scope, element, attrs) {
                 var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
                     url: scope.uploadUrl,
-                    init: function() {
+                    init: function () {
                         var dz = this;
-                        dz.on('sending', function(file, xhr, data) {
+                        dz.on('sending', function (file, xhr, data) {
                             var token = window.document.querySelector('meta[name=token]').getAttribute('content');
                             data.append('_token', token);
                         });
                         if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
-                        dz.on('success', function(file, data) {
+                        dz.on('success', function (file, data) {
                             $(file.previewElement).fadeOut(400, function () {
                                 dz.removeFile(file);
                             });
                         });
                         if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
                         dz.on('error', function (file, errorMessage, xhr) {
-                            if (errorMessage.file) {
-                                $(file.previewElement).find('[data-dz-errormessage]').text(errorMessage.file[0]);
+                            console.log(errorMessage);
+                            console.log(xhr);
+                            function setMessage(message) {
+                                $(file.previewElement).find('[data-dz-errormessage]').text(message);
                             }
+
+                            if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
+                            if (errorMessage.file) setMessage(errorMessage.file[0]);
+
                         });
                     }
                 });
@@ -139,14 +145,14 @@ module.exports = function(ngApp) {
     }]);
 
 
-    ngApp.directive('dropdown', [function() {
+    ngApp.directive('dropdown', [function () {
         return {
             restrict: 'A',
-            link: function(scope, element, attrs) {
+            link: function (scope, element, attrs) {
                 var menu = element.find('ul');
-                element.find('[dropdown-toggle]').on('click', function() {
+                element.find('[dropdown-toggle]').on('click', function () {
                     menu.show().addClass('anim menuIn');
-                    element.mouseleave(function() {
+                    element.mouseleave(function () {
                         menu.hide();
                         menu.removeClass('anim menuIn');
                     });