BlueInk.component('image-editor', {
  template: require('./editor.html'),
  replace: true,
  data: function() {
    return {
      doc: {
        type: 'image',
      },
      // storage for Blob from file selection
      file: ''
    }
  },
  computed: {
    src: function() {
      var doc = this.doc;
      if (this.file !== '') {
        // user's picked a file
        return URL.createObjectURL(this.file);
      } else if ('_id' in doc && '_attachments' in doc && 'self' in doc._attachments) {
        // no file picked yet, but we do have an attachment!
        // ...plus cache busting. :-P
        return '_blueink/' + doc._id + '/self' + '?' + Date.now();
      } else {
        return '';
      }
    }
  },
  methods: {
    setFile: function(ev) {
      this.$set('file', ev.target.files[0]);
    },
    output: function() {
      this.doc.type = 'image';
      if (this.src.substr(0,4) === 'blob') {
        // if we have a blog URL, setup the _attachments object
        // TODO: can this live in a computed property?..underscore may kill that
        this.doc._attachments = {
          "self": {
            content_type: this.file.type,
            data: this.file
          }
        }
      }

      // compile attachment from file input
      // store it in the proper place
      return this.doc;
    }
  }
});

@@ -1,8 +1,210 @@
+var blank_doc = %7B%0A  type: 'image',%0A%7D;%0A%0ABlueInk.component('image-viewer', %7B%0A  template: require('./viewer.html'),%0A  replace: true,%0A  data: function() %7B%0A    return %7B%0A      data: blank_doc%0A    %7D;%0A  %7D%0A%7D);%0A%0A
 BlueInk.
@@ -335,40 +335,17 @@
 oc: 
-%7B%0A        type: 'image',%0A      %7D
+blank_doc
 ,%0A  

Add image preview