Add the ability to read a local file as base64

src/coffee/controllers/markdown_image_controller.coffee

@@ -17,17 +17,38 @@ module.exports = class MarkdownImageController extends BaseController
         options.templateName = 'markdown_image'
         super
 
+    # Event Methods ################################################################################
+
+    onButtonClicked: ->
+        @$input.click()
+
+    onFileChanged: ->
+        file = @$input.prop('files')[0]
+        @_reader = new FileReader
+        @_reader.onload = =>
+            index = @_reader.result.indexOf ','
+            meta = @_reader.result.substring 0, index
+            encodedData = @_reader.result.substring index + 1
+
+            match    = meta.match /data:(.*);(.*)/
+            mimeType = match[1]
+            encoding = match[2]
+
+            logger.debug "uploaded #{encodedData.length} bytes as #{mimeType} in #{encoding}"
+
+        @_reader.readAsDataURL file
+
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
         @$image    = @$('img')
         @$fileName = @$('.fileName p')
         @$button   = @$('button')
+        @$input    = @$('input')
+
         super
 
     refresh: ->
-        logger.debug "refreshing with model: #{@model.mimeType}, #{_.ellipsize(@model.encodedData)}"
-
         if @model.mimeType? and @model.encodedData?
             @$image.attr 'src', "data:#{@model.mimeType};base64,#{@model.encodedData}"
         else
@@ -41,3 +62,10 @@ module.exports = class MarkdownImageController extends BaseController
             @$button.html 'Choose'
 
         super
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        return _.extend super,
+            'click button': 'onButtonClicked'
+            'change input': 'onFileChanged'

src/jade/templates/markdown_image.jade

@@ -9,3 +9,4 @@
     .thumbnail: img
     .fileName: p
     button
+    input(type="file", accept="image/gif,image/jpeg,image/png" multiple="false")

src/scss/main.scss

@@ -84,6 +84,7 @@ $color-link:               #0000FF;
 $color-link-subtle:        #545A99;
 $color-text:               #000000;
 $color-text-light:         #FFFFFF;
+$color-white:              #FFFFFF;
 
 // Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
 

src/scss/tags.scss

@@ -18,10 +18,16 @@ button {
     cursor: pointer;
     font-size: $font-size-normal;
     font-weight: bold;
+    outline: none;
     padding: 0.1em 1em;
 
+    &:active {
+        background: $color-active;
+        color: $color-white;
+    }
+
     &:hover {
-        background: white;
+        background: $color-white;
         color: $color-active-hover;
     }
 

src/scss/templates/markdown_image.scss

@@ -39,4 +39,10 @@ All rights reserved.
     button {
         position: absolute; left: 7.33em; bottom: 0.66em;
     }
+
+    input {
+        position: absolute;
+        visibility: none;
+        z-index: -1;
+    }
 }