How to preview image before upload?

I'm very excited about this new blogging platform Ghost. The markdown support and live preview are amazing. How they are developing extensions for markdown like drag and drop image upload?

• Ghost, http://tryghost.org/

• Answer:

  Markdown is a very loose basic specification for an incredibly useful language. Several people have been extending Markdown to add their own syntax and repurpose it for their needs. When this happens people generally refer to the new syntax as a "flavour" of Markdown. The most famous, currently, is probably https://help.github.com/articles/github-flavored-markdown, which adds a whole bunch of really interesting new functionality which is mainly targeted at Developers working with the Github platform. The only thing Markdown really does, is get converted to valid HTML. So extending it is a case of deciding what you would like to do, and implementing it in whatever script you're using to convert your Markdown to HTML. In the case of Ghost, this is currently a script called https://github.com/coreyti/showdown. In order to create the image uploader, we simply hook into what the user is typing (at the moment with a http://en.wikipedia.org/wiki/Regular_expression) and detect when they type the syntax which we want to use. When that happens, we interpret the syntax and use it to generate an upload form in the preview pane. Finally, once the image has completed uploading, we send valid data (in this case the uploaded image source url) from the uploader *back* to be injected into the Markdown syntax. Our implementation is far from perfect. Like most other things in Ghost, it's a bit of a prototype. At the moment we're relying on extending 3rd party scripts and plugging them together in order to achieve the end result we're looking for - but in the long run this is an area that we'd like to build out completely from scratch. Writing workflow is undoubtedly the core competency of Ghost, and we want to make sure that ours is really, really good :)