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 = =>
-            index = @_reader.result.indexOf ','
-            meta = @_reader.result.substring 0, index
-            encodedData = @_reader.result.substring index + 1
+
+        reader = @_reader = new FileReader
+        reader.abort = false
+        reader.onload = =>
+            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)=>
-            return "![#{altText}](#{@imageBase}/#{fileName})"
+        text.replace /\<img src="([^"]*)"/g, (match, 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