Merge pull request #130 from taigaio/us/1212/attachment-max-size

US #1212: Show info about maximun size allowed for the avatar and attachments

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Multiple User stories Drag & Drop in the backlog.
 - Add visual difference to closed USs in backlog panel.
 - Show crerated date of attachments in the hover of the filename.
+- Show info about maximun size allowed for avatar and attachments files.
 - Add beta ribbon.
 - Support for custom text when inviting users.
 

app/coffee/modules/common/attachments.coffee

@@ -72,10 +72,12 @@ class AttachmentsController extends taiga.Controller
             @.attachments.push(data)
             @rootscope.$broadcast("attachment:create")
 
-        promise = promise.then null, (data) ->
+        promise = promise.then null, (data) =>
+            @scope.$emit("attachments:size-error") if data.status == 413
             index = @.uploadingAttachments.indexOf(attachment)
             @.uploadingAttachments.splice(index, 1)
-            @confirm.notify("error", null, "We have not been able to upload '#{attachment.name}'.")
+            @confirm.notify("error", "We have not been able to upload '#{attachment.name}'.
+                                      #{data.data._error_message}")
             return @q.reject(data)
 
         return promise
@@ -109,7 +111,8 @@ class AttachmentsController extends taiga.Controller
             @.updateCounters()
             @rootscope.$broadcast("attachment:edit")
 
-        onError = =>
+        onError = (response) =>
+            $scope.$emit("attachments:size-error") if response.status == 413
             @confirm.notify("error")
             return @q.reject()
 
@@ -151,7 +154,7 @@ class AttachmentsController extends taiga.Controller
         return not item.is_deprecated
 
 
-AttachmentsDirective = ($confirm) ->
+AttachmentsDirective = ($config, $confirm) ->
     template = _.template("""
     <section class="attachments">
         <div class="attachments-header">
@@ -159,7 +162,11 @@ AttachmentsDirective = ($confirm) ->
                 <span class="attachments-num" tg-bind-html="ctrl.attachmentsCount"></span>
                 <span class="attachments-text">attachments</span>
             </h3>
-            <div tg-check-permission="modify_<%- type %>" title="Add new attachment" class="add-attach">
+            <div tg-check-permission="modify_<%- type %>" class="add-attach"
+                 title="Add new attachment. <%- maxFileSizeMsg %>">
+                <% if (maxFileSize){ %>
+                <span class="size-info hidden">[Max. size:  <%- maxFileSize %>]</span>
+                <% }; %>
                 <label for="add-attach" class="icon icon-plus related-tasks-buttons"></label>
                 <input id="add-attach" type="file" multiple="multiple"/>
             </div>
@@ -195,7 +202,6 @@ AttachmentsDirective = ($confirm) ->
         </div>
     </section>""")
 
-
     link = ($scope, $el, $attrs, $ctrls) ->
         $ctrl = $ctrls[0]
         $model = $ctrls[1]
@@ -222,6 +228,12 @@ AttachmentsDirective = ($confirm) ->
             $ctrl.reorderAttachment(attachment, newIndex)
             $ctrl.saveAttachments()
 
+        showSizeInfo = ->
+            $el.find(".size-info").removeClass("hidden")
+
+        $scope.$on "attachments:size-error", ->
+            showSizeInfo()
+
         $el.on "change", ".attachments-header input", (event) ->
             files = _.toArray(event.target.files)
             return if files.length < 1
@@ -249,7 +261,16 @@ AttachmentsDirective = ($confirm) ->
             $el.off()
 
     templateFn = ($el, $attrs) ->
-        return template({type: $attrs.type})
+        maxFileSize = $config.get("maxUploadFileSize", null)
+        maxFileSize = sizeFormat(maxFileSize) if maxFileSize
+        maxFileSizeMsg = if maxFileSize then "Maximum upload size is #{maxFileSize}" else "" # TODO: i18n
+
+        ctx = {
+            type: $attrs.type
+            maxFileSize: maxFileSize
+            maxFileSizeMsg: maxFileSizeMsg
+        }
+        return template(ctx)
 
     return {
         require: ["tgAttachments", "ngModel"]
@@ -261,7 +282,7 @@ AttachmentsDirective = ($confirm) ->
         template: templateFn
     }
 
-module.directive("tgAttachments", ["$tgConfirm", AttachmentsDirective])
+module.directive("tgAttachments", ["$tgConfig", "$tgConfirm", AttachmentsDirective])
 
 
 AttachmentDirective = ->

app/coffee/modules/resources/attachments.coffee

@@ -24,7 +24,7 @@ taiga = @.taiga
 sizeFormat = @.taiga.sizeFormat
 
 
-resourceProvider = ($rootScope, $urls, $model, $repo, $auth, $q) ->
+resourceProvider = ($rootScope, $config, $urls, $model, $repo, $auth, $q) ->
     service = {}
 
     service.list = (urlName, objectId, projectId) ->
@@ -38,6 +38,16 @@ resourceProvider = ($rootScope, $urls, $model, $repo, $auth, $q) ->
             defered.reject(null)
             return defered.promise
 
+        maxFileSize = $config.get("maxUploadFileSize", null)
+        if maxFileSize and file.size > maxFileSize
+            response = {
+                status: 413,
+                data: _error_message: "'#{file.name}' (#{sizeFormat(file.size)}) is too heavy for our oompa
+                                       loompas, try it with a smaller than {#{sizeFormat(maxFileSize)})"
+            }
+            defered.reject(response)
+            return defered.promise
+
         uploadProgress = (evt) =>
             $rootScope.$apply =>
                 file.status = "in-progress"
@@ -83,5 +93,5 @@ resourceProvider = ($rootScope, $urls, $model, $repo, $auth, $q) ->
 
 
 module = angular.module("taigaResources")
-module.factory("$tgAttachmentsResourcesProvider", ["$rootScope", "$tgUrls", "$tgModel", "$tgRepo", "$tgAuth",
+module.factory("$tgAttachmentsResourcesProvider", ["$rootScope", "$tgConfig", "$tgUrls", "$tgModel", "$tgRepo",
-                                                   "$q", resourceProvider])
+                                                   "$tgAuth", "$q", resourceProvider])

app/coffee/modules/resources/user-settings.coffee

@@ -21,13 +21,26 @@
 
 
 taiga = @.taiga
+sizeFormat = @.taiga.sizeFormat
 
-resourceProvider = ($repo, $http, $urls) ->
+
+resourceProvider = ($config, $repo, $http, $urls, $q) ->
     service = {}
 
-    service.changeAvatar = (attachmentModel) ->
+    service.changeAvatar = (file) ->
+        maxFileSize = $config.get("maxUploadFileSize", null)
+        if maxFileSize and file.size > maxFileSize
+            response = {
+                status: 413,
+                data: _error_message: "'#{file.name}' (#{sizeFormat(file.size)}) is too heavy for our oompa
+                                       loompas, try it with a smaller than {#{sizeFormat(maxFileSize)})"
+            }
+            defered = $q.defer()
+            defered.reject(response)
+            return defered.promise
+
         data = new FormData()
-        data.append('avatar', attachmentModel)
+        data.append('avatar', file)
         options = {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
@@ -52,4 +65,5 @@ resourceProvider = ($repo, $http, $urls) ->
 
 
 module = angular.module("taigaResources")
-module.factory("$tgUserSettingsResourcesProvider", ["$tgRepo", "$tgHttp", "$tgUrls", resourceProvider])
+module.factory("$tgUserSettingsResourcesProvider", ["$tgConfig", "$tgRepo", "$tgHttp", "$tgUrls", "$q",
+                                                    resourceProvider])

app/coffee/modules/user-settings/main.coffee

@@ -21,6 +21,7 @@
 
 taiga = @.taiga
 mixOf = @.taiga.mixOf
+sizeFormat = @.taiga.sizeFormat
 module = angular.module("taigaUserSettings")
 
 
@@ -32,6 +33,7 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
     @.$inject = [
         "$scope",
         "$rootScope",
+        "$tgConfig",
         "$tgRepo",
         "$tgConfirm",
         "$tgResources",
@@ -42,11 +44,15 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin)
         "$tgAuth"
     ]
 
-    constructor: (@scope, @rootscope, @repo, @confirm, @rs, @params, @q, @location, @navUrls, @auth) ->
+    constructor: (@scope, @rootscope, @config, @repo, @confirm, @rs, @params, @q, @location, @navUrls, @auth) ->
         @scope.sectionName = "User Profile" #i18n
         @scope.project = {}
         @scope.user = @auth.getUser()
 
+        maxFileSize = @config.get("maxUploadFileSize", null)
+        if maxFileSize
+            @scope.maxFileSizeMsg = "[Max, size: #{sizeFormat(maxFileSize)}" # TODO: i18n
+
         promise = @.loadInitialData()
 
         promise.then null, @.onInitialDataError.bind(@)
@@ -111,6 +117,9 @@ module.directive("tgUserProfile", ["$tgConfirm", "$tgAuth", "$tgRepo",  UserProf
 
 UserAvatarDirective = ($auth, $model, $rs, $confirm) ->
     link = ($scope, $el, $attrs) ->
+        showSizeInfo = ->
+            $el.find(".size-info").removeClass("hidden")
+
         onSuccess = (response) ->
             user = $model.make_model("users", response.data)
             $auth.setUser(user)
@@ -120,6 +129,7 @@ UserAvatarDirective = ($auth, $model, $rs, $confirm) ->
             $confirm.notify('success')
 
         onError = (response) ->
+            showSizeInfo() if response.status == 413
             $el.find('.overlay').hide()
             $confirm.notify('error', response.data._error_message)
 

app/partials/user-profile.jade

@@ -24,9 +24,9 @@ block content
                                     span.icon.icon-spinner
                             input(type="file", id="avatar-field", class="hidden",
                                 tg-avatar-model="avatarAttachment")
-
+                            p The image will be cropped to 80x80px.<br>
-                            p The image will be cropped to 80x80 size.
+                                span.size-info.hidden(tg-bo-html="maxFileSizeMsg")
-                            a.button.button-green.change Change
+                            a.button.button-green.change(tg-bo-title="'Change photo. ' + maxFileSizeMsg") Change
                             a.use-gravatar Use gravatar image
 
                     div.data
@@ -60,7 +60,7 @@ block content
                     a.delete-account(href="", title="Delete Taiga account",
                                      ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
 
-    div.lightbox.lightbox-delete-account.hidden(tg-lb-delete-user)        
+    div.lightbox.lightbox-delete-account.hidden(tg-lb-delete-user)
 
     div.lightbox.lightbox-confirm-use-gravatar.hidden
         include views/modules/lightbox-use-gravatar

app/styles/modules/common/attachments.scss

@@ -169,4 +169,8 @@
     input {
         display: none;
     }
+    span {
+        @extend %small;
+        color: $gray-light;
+    }
 }

app/styles/modules/user-settings/user-profile.scss

@@ -36,9 +36,13 @@
             }
             p {
                 @extend %xsmall;
-                margin-bottom: 0;
+                line-height: .8rem;
+                margin-bottom: .3rem;
                 text-align: center;
             }
+            span {
+                @extend %bold;
+            }
             .use-gravatar {
                 @extend %small;
                 cursor: pointer;

conf/main.example.json

@@ -5,5 +5,6 @@
     "publicRegisterEnabled": true,
     "feedbackEnabled": true,
     "privacyPolicyUrl": null,
-    "termsOfServiceUrl": null
+    "termsOfServiceUrl": null,
+    "maxUploadFileSize": null
 }