Commit affa35b3

@@ -1,17 +1,13 @@
 <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-  <h2>This is a modal!</h2>
+  <h2>Upload Photo</h2>
 </div>
 <div class="modal-body">
   <form id="new-photo" name="photo" class="form-horizontal">
-    <fieldset>
-      <div class="control-group">
-        <label class="control-label" for="photo_attachment">Photo</label>
-        <div class="controls">
-          <input class="input-xxlarge" id="photo_attachment" name="attachment" type="file">
-        </div>
-      </div>
-    </fieldset>
+    <span class="btn btn-default btn-file">
+      + Browse... <input id="photo-attachment" name="attachment" type="file" accept="image/*">
+    </span>
+    <img id="preview-image" src="#" alt="your image" class="hide" />
   </form>
 </div>
 <div class="modal-footer">

@@ -5,6 +5,7 @@ class Cake.Views.Photos.NewModalView extends Backbone.View
 
   events:
     "click #upload-photo-button": "save"
+    "change #photo-attachment": "displayPreview"
 
   constructor: (options) ->
     super(options)
@@ -38,3 +39,14 @@ class Cake.Views.Photos.NewModalView extends Backbone.View
     $(@el).html(@template(@model.toJSON()))
     this.$("form").backboneLink(@model)
     return this
+
+  displayPreview: (event) ->
+    input = event.currentTarget
+    if (input.files && input.files[0])
+      reader = new FileReader()
+      reader.onload = (e) ->
+        $('#preview-image').attr('src', e.target.result)
+        $('#preview-image').removeClass('hide')
+      reader.readAsDataURL(input.files[0])
+    else
+      $('#preview-image').addClass('hide')

@@ -32,9 +32,9 @@ footer #footer-floor {
   margin-bottom: 20px;
   margin-top: 30px;
   background: image-url("linen-light-blue.jpg") repeat scroll left top transparent;
-    border-bottom: 1px solid #BFD0E1;
-    border-top: 1px solid #BFD0E1;
-    box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #FFFFFF inset;
+  border-bottom: 1px solid #BFD0E1;
+  border-top: 1px solid #BFD0E1;
+  box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #FFFFFF inset;
 }
 
 .marketing h1 {
@@ -121,6 +121,25 @@ footer #footer-floor {
 }
 
 ul.tagit {
-    margin-left: 0px; /* force it to show up left aligned */
+  margin-left: 0px; /* force it to show up left aligned */
 
 }
+.btn-file {
+  position: relative;
+  overflow: hidden;
+}
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 999px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
+}