diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index f7773b62..3dc6317f 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 0ae073dc..69c3d24d 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2954,6 +2954,46 @@ body > .page-alert { font-family: IconicStroke; } } +.btn.btn-file { + overflow: hidden; + position: relative; + vertical-align: middle; +} +.btn.btn-file > input[type="file"] { + width: 100%; + position: absolute; + left: 0; + top: 0; + opacity: 0; + cursor: pointer; +} +.fileupload { + margin-bottom: 9px; +} +.fileupload .uneditable-input { + display: inline-block; + margin-bottom: 0px; + vertical-align: middle; +} +.fileupload .thumbnail { + overflow: hidden; + display: inline-block; + margin-bottom: 5px; + vertical-align: middle; + display: inline-block; + text-align: center; +} +.fileupload .thumbnail > img { + display: inline-block; + vertical-align: middle; + max-height: 100%; +} +.fileupload .btn { + vertical-align: middle; +} +.fileupload-exists .fileupload-new, .fileupload-new .fileupload-exists { + display: none; +} .nav { margin-left: 0; margin-bottom: 18px; diff --git a/docs/assets/js/bootstrap-fileupload.js b/docs/assets/js/bootstrap-fileupload.js new file mode 100644 index 00000000..9b7f7573 --- /dev/null +++ b/docs/assets/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 = $(''); + 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(''); + 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; + }); + }) +}); diff --git a/docs/base-css.html b/docs/base-css.html index 142296f9..6547f5c3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1318,6 +1318,16 @@ on multiple lines +
+
+

Upload button

+

It's possible to use a button to upload files, instead of showing the native browser element.

+ Upload a file +

There is also an interactive file and image upload widgets available. View the Javascript docs for that.

+
+
+ +
@@ -1907,6 +1917,7 @@ on multiple lines + diff --git a/docs/components.html b/docs/components.html index 0041a7da..872ee2e7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1581,6 +1581,7 @@ + diff --git a/docs/download.html b/docs/download.html index 31accd9a..29ae7b21 100644 --- a/docs/download.html +++ b/docs/download.html @@ -359,6 +359,7 @@ + diff --git a/docs/examples.html b/docs/examples.html index 288c8963..680a4b27 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -142,6 +142,7 @@ + diff --git a/docs/index.html b/docs/index.html index dd78ff42..3fe139c9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -254,6 +254,7 @@ + diff --git a/docs/javascript.html b/docs/javascript.html index c88b781d..c004436b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -92,10 +92,16 @@
  • Button
  • Collapse
  • Carousel
    • -
  • Typeahead
    • -
  • Placeholder
    • -
  • Input mask
    • +
  • + Input + +
  • Table href
    • +
  • Fileupload
    • @@ -189,7 +195,7 @@
    @@ -199,6 +205,12 @@

    A simple plugin, to turn table rows into a links.

    +
    + +
    + + + +
    +
    +

    Fileupload bootstrap-fileupload.js

    +
    + +
    +
    +

    About

    +

    The file upload plugin allows you to create a visually appealing file or image upload element.

    + Download file +
    + +
    +

    Examples file upload element

    +
    +
    +
    +
    + Select fileChange + Remove +
    +
    +
    +
    +
    + Select fileChange + Remove +
    +
    +
    +
    + +

    Example image upload elements

    +

    Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width + and max-height.

    +
    +
    +
    +
    +
    +
    + Select imageChange + Remove +
    +
    +
    +
    +
    +
    +
    + Select imageChange + Remove +
    +
    +
    +
    +
    +
    +
    + Select imageChange + Remove +
    +
    + +
    + Select imageChange + Remove +
    +
    +
    +
    +
    +
    + +

    Markup

    +

    Use the data-fileupload attribute to register the file upload widget. The main container should either have the .fileupload-new class for a new record or if the record + does not have file or .fileupload-exists if an existing file is present. Elements inside the container with the .fileupload-new and fileupload-exists + class will be shown or hidden based on the current state. The content of .fileupload-preview is replaced when a file is selected. Implement a button to clear + the file with data-dismiss="fileupload".

    + +

    File upload element

    +
    +<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">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>
+  <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
+</div>
+
    + +

    Image upload element

    +
    +<div class="fileupload fileupload-new" data-fileupload="image">
+  <div class="fileupload-preview fileupload-new thumbnail"><img src="" /></div>
+  <div class="fileupload-preview fileupload-exists thumbnail"></div>
+  <div>
+    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
+    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
+  </div>
+</div>
+
    +
    +
    +
    + +