Restrict uploaded image size

src/coffee/controllers/markdown_image_controller.coffee

@@ -5,6 +5,7 @@ Copyright (c) 2015 by Redwood Labs
 All rights reserved.
 ###
 
+$              = require 'jquery'
 _              = require 'underscore'
 BaseController = require './base_controller'
 {Duration}     = require '../constants'
@@ -14,11 +15,17 @@ MarkdownImage  = require '../models/markdown_image'
 
 module.exports = class MarkdownImageController extends BaseController
 
+    MAX_FILE_SIZE = 750 * 1024
+    MAX_HEIGHT    = 600
+    MAX_WIDTH     = 740
+
     constructor: (options={})->
         if not options.model? then throw new Error 'options.model is required'
         options.templateName = 'markdown_image'
         super
 
+        @_errorMessage = null
+
     # Event Methods ################################################################################
 
     onButtonClicked: ->
@@ -29,8 +36,14 @@ module.exports = class MarkdownImageController extends BaseController
 
         file = @$input.prop('files')[0]
 
+        if file.size > MAX_FILE_SIZE
+            logger.warning "The choosen file, #{file.name}, is too large: #{file.size}"
+            @errorMessage = "Choose a file less than #{MAX_FILE_SIZE / 1024}kB"
+            return
+
         reader = @_reader = new FileReader
         reader.abort = false
+
         reader.onload = =>
             if reader.abort
                 logger.info "aborted reading #{file.name}"
@@ -38,20 +51,50 @@ module.exports = class MarkdownImageController extends BaseController
 
             @_reader = null
 
-            index       = reader.result.indexOf ','
+            $image = $("<img src=\"#{reader.result}\">")
-            meta        = reader.result.substring 0, index
+            $image.load =>
-            encodedData = reader.result.substring index + 1
+                if $image[0].naturalHeight > MAX_HEIGHT
+                    logger.warning "The choosen file, #{file.name}, is too tall: #{$image[0].naturalHeight}"
+                    @errorMessage = "Choose an image less than #{MAX_HEIGHT}px tall"
+                    return
+                if $image[0].naturalWidth > MAX_WIDTH
+                    logger.warning "The choosen file, #{file.name}, is too wide: #{$image[0].naturalWidth}"
+                    @errorMessage = "Choose an image less than #{MAX_WIDTH}px wide"
+                    return
 
-            match    = meta.match /data:(.*);(.*)/
+                index       = reader.result.indexOf ','
-            mimeType = match[1]
+                meta        = reader.result.substring 0, index
-            encoding = match[2]
+                encodedData = reader.result.substring index + 1
 
-            @model.encodedData = encodedData
+                match    = meta.match /data:(.*);(.*)/
-            logger.info "loaded #{encodedData.length} bytes from #{file.name} as #{mimeType}"
+                mimeType = match[1]
+                encoding = match[2]
+
+                @model.encodedData = encodedData
+                logger.info "loaded #{encodedData.length} bytes from #{file.name} as #{mimeType}"
+                @errorMessage = null
 
         logger.info "starting to read local file: #{file.name}"
         reader.readAsDataURL file
 
+    # Property Methods #############################################################################
+
+    getErrorMessage: ->
+        return @_errorMessage
+
+    setErrorMessage: (newErrorMessage)->
+        oldErrorMessage = @_errorMessage
+        return if newErrorMessage is oldErrorMessage
+
+        @_errorMessage = newErrorMessage
+        @trigger Event.change + ':errorMessage', this, oldErrorMessage, newErrorMessage
+        @trigger Event.change, this
+
+        @tryRefresh()
+
+    Object.defineProperties @prototype,
+        errorMessage: { get:@prototype.getErrorMessage, set:@prototype.setErrorMessage }
+
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
@@ -89,6 +132,9 @@ module.exports = class MarkdownImageController extends BaseController
         if @model.status is MarkdownImage.Status.empty
             @$errorMessage.html 'please choose an image'
             @$errorContainer.show duration:Duration.normal
+        else if @errorMessage?
+            @$errorMessage.html @errorMessage
+            @$errorContainer.show duration:Duration.normal
         else
             @$errorContainer.hide duration:Duration.normal