Use uploaded images in markdown preview

src/coffee/controllers/markdown_image_controller.coffee

@@ -7,6 +7,7 @@ All rights reserved.
 
 _              = require 'underscore'
 BaseController = require './base_controller'
+MarkdownImage  = require '../models/markdown_image'
 
 ########################################################################################################################
 
@@ -23,20 +24,35 @@ module.exports = class MarkdownImageController extends BaseController
         @$input.click()
 
     onFileChanged: ->
+        if @_reader? then @_reader.abort = true
+
         file = @$input.prop('files')[0]
-        @_reader = new FileReader
+
-        @_reader.onload = =>
+        reader = @_reader = new FileReader
-            index = @_reader.result.indexOf ','
+        reader.abort = false
-            meta = @_reader.result.substring 0, index
+        reader.onload = =>
-            encodedData = @_reader.result.substring index + 1
+            if reader.abort
+                logger.info "aborted reading #{file.name}"
+                return
+
+            @_reader = null
+
+            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}"
+            @model.set
+                encodedData: encodedData
+                status:      MarkdownImage.Status.updateable
 
-        @_reader.readAsDataURL file
+            logger.info "loaded #{encodedData.length} bytes from #{file.name} as #{mimeType}"
+
+        logger.info "starting to read local file: #{file.name}"
+        reader.readAsDataURL file
 
     # BaseController Overrides #####################################################################
 

src/coffee/controllers/markdown_image_list_controller.coffee

@@ -23,9 +23,15 @@ module.exports = class MarkdownImageListController extends BaseController
 
     # Public Methods ###############################################################################
 
+    getImageUrlForFile: (fileName)->
+        @model.getImageUrlForFile fileName
+
     loadImages: ->
         @model.loadImages()
 
+    reset: ->
+        @model.reset()
+
     # Property Methods #############################################################################
 
     getImageBase: ->

src/coffee/controllers/markdown_section_controller.coffee

@@ -73,6 +73,9 @@ module.exports = class MarkdownSectionController extends BaseController
         @model = @_originalModel
         @resetToDefaultState()
 
+        @_imageListController.reset()
+        @_updatePreview()
+
     onEditClicked: (event)->
         event.preventDefault()
         return unless @editable
@@ -89,6 +92,7 @@ module.exports = class MarkdownSectionController extends BaseController
 
     onPreviewClicked: (event)->
         event.preventDefault()
+        @_updatePreview()
         @state = State.previewing
 
     onReturnClicked: (event)->
@@ -191,8 +195,8 @@ module.exports = class MarkdownSectionController extends BaseController
     # Private Methods ##############################################################################
 
     _convertImageLinks: (text)->
-        text.replace /\!\[([^\]]*)\]\(([^\)]*)\)/g, (match, altText, fileName)=>
+        text.replace /\<img src="([^"]*)"/g, (match, fileName)=>
-            return "![#{altText}](#{@imageBase}/#{fileName})"
+            return "<img src=\"#{@_imageListController.getImageUrlForFile(fileName)}\""
 
     _convertWikiLinks: (text)->
         text.replace /\[\[([^\]]*)\]\]/g, (match, name)=>
@@ -215,8 +219,8 @@ module.exports = class MarkdownSectionController extends BaseController
         text = @model
         if @model?
             text = @_convertWikiLinks text
-            text = @_convertImageLinks text
             text = convertMarkdown text
+            text = @_convertImageLinks text
 
         @$markdownPanel.html text
 

src/coffee/models/markdown_image.coffee

@@ -26,7 +26,7 @@ module.exports = class MarkdownImage extends BaseModel
         'empty':      'empty'
         'creatable':  'creatable'
         'unchanged':  'unchanged'
-        'updateable': 'updatable'
+        'updateable': 'updateable'
     }
 
     constructor: (attributes={}, options={})->
@@ -46,6 +46,12 @@ module.exports = class MarkdownImage extends BaseModel
     getFullPath: ->
         return "#{@path}/#{@fileName}"
 
+    getImageUrl: ->
+        if @mimeType? and @encodedData?
+            return "data:#{@mimeType};base64,#{@encodedData}"
+        else
+            return @fullPath
+
     getMimeType: ->
         if not @_mimeType?
             for mimeType in MimeTypes
@@ -57,6 +63,7 @@ module.exports = class MarkdownImage extends BaseModel
 
     Object.defineProperties @prototype,
         fullPath: {get:@prototype.getFullPath}
+        imageUrl: {get:@prototype.getImageUrl}
         mimeType: {get:@prototype.getMimeType}
 
     # BaseModel Overrides ##########################################################################

src/coffee/models/markdown_image_list.coffee

@@ -30,11 +30,20 @@ module.exports = class MarkdownImageList extends BaseModel
 
     # Public Methods ###############################################################################
 
+    getImageUrlForFile: (fileName)->
+        result = @_images[fileName]?.imageUrl
+        result ?= "#{@imageBase}/#{fileName}"
+        return result
+
     loadImages: ->
         for fileName, image of @_images
             if image.status is MarkdownImage.Status.unknown
                 image.fetch()
 
+    reset: ->
+        @_images = {}
+        @_analyzeMarkdownText()
+
     # Property Methods #############################################################################
 
     getAll: ->