Added fileupload

Added fileupload.less and bootstrap-fileupload.js
Added file/image upload to docs

docs/templates/layout.mustache

@@ -108,6 +108,7 @@
     <script src="assets/js/bootstrap-collapse.js"></script>
     <script src="assets/js/bootstrap-carousel.js"></script>
     <script src="assets/js/bootstrap-typeahead.js"></script>
+    <script src="assets/js/bootstrap-fileupload.js"></script>
     <script src="assets/js/application.js"></script>
 
     {{#production}}

docs/templates/pages/base-css.mustache

@@ -1215,6 +1215,15 @@
     </div>
   </div>
 
+  <div class="row">
+    <div class="span4">
+        <h3>{{_i}}Upload button{{/i}}</h3>
+        <p>{{_i}}It's possible to use a button to upload files, instead of showing the native browser element.{{/i}}</p>
+        <span class="btn btn-file">Upload a file<input type="file" /></span>
+        <p>{{_i}}There is also an interactive file and image upload widgets available. View <a href="./javascript.html#fileupload">the Javascript docs</a> for that.{{/i}}</p>
+    </div>
+  </div>
+
   <br>
 
 </section>

docs/templates/pages/javascript.mustache

@@ -1355,4 +1355,112 @@ $('.myCarousel').carousel({
           <p>{{_i}}Initializes an input with a typahead.{{/i}}</p>
         </div>
       </div>
-    </section>
+    </section>
+
+
+
+    <!-- Fileupload
+    ================================================== -->
+    <section id="fileupload">
+      <div class="page-header">
+        <h1>{{_i}}Fileupload{{/i}} <small>bootstrap-fileupload.js</small></h1>
+      </div>
+
+      <div class="row">
+        <div class="span3 columns">
+          <h3>{{_i}}About{{/i}}</h3>
+          <p>{{_i}}The file upload plugin allows you to create a visually appealing file or image upload element.{{/i}}</p>
+          <a href="assets/js/bootstrap-fileupload.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
+        </div>
+
+        <div class="span9 columns">
+          <h2>{{_i}}Examples file upload element{{/i}}</h2>
+          <div class="row">
+            <div class="span4 columns">
+              <div class="fileupload fileupload-new" data-fileupload="file">
+                <div class="fileupload-preview fileupload-exists uneditable-input"></div>
+                <span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
+                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
+              </div>
+            </div>
+            <div class="span4 columns">
+              <div class="fileupload fileupload-new" data-fileupload="file">
+                <div class="uneditable-input"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div>
+                <span class="btn btn-file"><span class="fileupload-new">{{_i}}Select file{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
+                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
+              </div>
+            </div>
+          </div>
+          <hr>
+
+          <h2>{{_i}}Example image upload elements{{/i}}</h2>
+          <p>{{_i}}Using the given elements, you can layout the upload widget the way you want, either with a fixed <code>width</code> and <code>height</code> or with <code>max-width</code>
+            and <code>max-height</code>.{{/i}}</p>
+          <div class="row">
+            <div class="span3 columns">
+              <div class="fileupload fileupload-new" data-fileupload="image">
+                <div class="fileupload-preview fileupload-new thumbnail" style="width: 250px; height: 180px;"><img src="http://www.placehold.it/250x180/EFEFEF/AAAAAA&text=no+image" /></div>
+                <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 250px; max-height: 180px;"></div>
+                <div>
+                    <span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
+                    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="span3 columns">
+              <div class="fileupload fileupload-new" data-fileupload="image">
+                <div class="fileupload-preview thumbnail" style="width: 250px; height: 180px;"></div>
+                <div>
+                    <span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
+                    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
+                </div>
+              </div>
+            </div>
+            <div class="span3 columns">
+              <div class="fileupload fileupload-new" data-fileupload="image">
+                <div class="fileupload-preview fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
+                <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
+                <span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
+                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
+              </div>
+              <br/>
+
+              <div class="fileupload fileupload-new" data-fileupload="image" style="text-align: right">
+                <span class="btn btn-file"><span class="fileupload-new">{{_i}}Select image{{/i}}</span><span class="fileupload-exists">{{_i}}Change{{/i}}</span><input type="file" /></span>
+                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">{{_i}}Remove{{/i}}</a>
+                <div class="fileupload-preview fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
+                <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
+              </div>
+            </div>
+          </div>
+          <hr>
+
+          <h3>{{_i}}Markup{{/i}}</h3>
+          <p>{{_i}}Use the <code>data-fileupload</code> attribute to register the file upload widget. The main container should either have the <code>.fileupload-new</code> class for a new record or if the record
+            does not have file or <code>.fileupload-exists</code> if an existing file is present. Elements inside the container with the <code>.fileupload-new</code> and <code>fileupload-exists</code>
+            class will be shown or hidden based on the current state. The content of <code>.fileupload-preview</code> is replaced when a file is selected. Implement a button to clear
+            the file with <code>data-dismiss="fileupload"</code>.{{/i}}</p>
+          
+          <h4>{{_i}}File upload element{{/i}}</h4>
+<pre class="prettyprint linenums">
+&lt;div class="fileupload fileupload-new" data-fileupload="file"&gt;
+  &lt;div class="fileupload-preview fileupload-exists uneditable-input"&gt;&lt;/div&gt;
+  &lt;span class="btn btn-file"&gt;&lt;span class="fileupload-new"&gt;{{_i}}Select file{{/i}}&lt;/span&gt;&lt;span class="fileupload-exists"&gt;{{_i}}Change{{/i}}&lt;/span&gt;&lt;input type="file" /&gt;&lt;/span&gt;
+  &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;{{_i}}Remove{{/i}}&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+          <h4>{{_i}}Image upload element{{/i}}</h4>
+<pre class="prettyprint linenums">
+&lt;div class="fileupload fileupload-new" data-fileupload="image"&gt;
+  &lt;div class="fileupload-preview fileupload-new thumbnail"&gt;&lt;img src="" /&gt;&lt;/div&gt;
+  &lt;div class="fileupload-preview fileupload-exists thumbnail"&gt;&lt;/div&gt;
+  &lt;div&gt;
+    &lt;span class="btn btn-file"&gt;&lt;span class="fileupload-new"&gt;{{_i}}Select image{{/i}}&lt;/span&gt;&lt;span class="fileupload-exists"&gt;{{_i}}Change{{/i}}&lt;/span&gt;&lt;input type="file" /&gt;&lt;/span&gt;
+    &lt;a href="#" class="btn fileupload-exists" data-dismiss="fileupload"&gt;{{_i}}Remove{{/i}}&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+        </div>
+      </div>
+    </section>

js/bootstrap-fileupload.js

@@ -0,0 +1,78 @@
+/* ==========================================================
+ * bootstrap-placeholder.js v2.0.0
+ * http://jasny.github.com/bootstrap/javascript.html#placeholder
+ * 
+ * Based on work by Daniel Stocks (http://webcloud.se)
+ * ==========================================================
+ * Copyright 2012 Jasny BV.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+/* TODO: turn this into a proper bootstrap plugin */
+
+;
+$(function () {
+      $('*[data-fileupload]').each(function () {
+          var container = $(this);
+          var input = $(this).find(':file');
+          var name = input.attr('name');
+          if (input.length == 0) return;
+          
+          var preview = $(this).find('.fileupload-preview').not('.fileupload-new');
+          if (preview.css('display') != 'inline' && preview.css('height') != 'none') preview.css('line-height', preview.css('height'));
+
+          var remove = $(this).find('*[data-dismiss="fileupload"]');
+          
+          var hidden_input = $(this).find(':hidden[name="'+name+'"]');
+          if (!hidden_input.length) {
+              hidden_input = $('<input type="hidden" />');
+              container.prepend(hidden_input);
+          }
+
+          var type = container.attr('data-fileupload') == "image" ? "image" : "file";
+
+          input.change(function(e) {
+              hidden_input.val('');
+              hidden_input.attr('name', '')
+              input.attr('name', name);
+
+              var file = e.target.files[0];
+              
+              if (type == "image" && preview.length && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match('\\.(gif|png|jpg)$')) && typeof FileReader !== "undefined") {
+                  var reader = new FileReader();
+
+                  reader.onload = function(e) {
+                     preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />');
+                     container.addClass('fileupload-exists').removeClass('fileupload-new');
+                  }
+
+                  reader.readAsDataURL(file);
+              } else {
+                  preview.html(escape(file.name));
+                  container.addClass('fileupload-exists').removeClass('fileupload-new');
+              }
+          });
+
+          remove.click(function() {
+              hidden_input.val('');
+              hidden_input.attr('name', name);
+              input.attr('name', '');
+
+              preview.html('');
+              container.addClass('fileupload-new').removeClass('fileupload-exists');
+
+              return false;
+          });
+      })
+});

less/bootstrap.less

@@ -37,6 +37,7 @@
 @import "buttons.less";
 @import "button-groups.less";
 @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+@import "fileupload.less";
 
 // Components: Nav
 @import "navs.less";

less/fileupload.less

@@ -0,0 +1,47 @@
+// Fileupload.less
+// CSS for file upload and image upload widgets
+// --------------------------------------------
+
+.btn.btn-file {
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+  > input[type="file"] {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+}
+
+.fileupload {
+  margin-bottom: 9px;
+  .uneditable-input {
+    display: inline-block;
+    margin-bottom: 0px;
+    vertical-align: middle;
+  }
+  .thumbnail {
+    overflow: hidden;
+    display: inline-block;
+    margin-bottom: 5px;
+    vertical-align: middle;
+    display: inline-block;
+    text-align: center;
+    > img {
+      display: inline-block;
+      vertical-align: middle;
+      max-height: 100%;
+    }
+  }
+  .btn {
+    vertical-align: middle;
+  }
+}
+
+.fileupload-exists .fileupload-new,
+.fileupload-new .fileupload-exists {
+  display: none;
+}