From 32bd4d9f98fc455a4db63ce77f89bb6bda68dfaa Mon Sep 17 00:00:00 2001 From: Arnold Daniels Date: Mon, 2 Apr 2012 13:52:24 +0200 Subject: [PATCH] Added fileupload Added fileupload.less and bootstrap-fileupload.js Added file/image upload to docs --- docs/templates/layout.mustache | 1 + docs/templates/pages/base-css.mustache | 9 ++ docs/templates/pages/javascript.mustache | 110 ++++++++++++++++++++++- js/bootstrap-fileupload.js | 78 ++++++++++++++++ less/bootstrap.less | 1 + less/fileupload.less | 47 ++++++++++ 6 files changed, 245 insertions(+), 1 deletion(-) create mode 100644 js/bootstrap-fileupload.js create mode 100644 less/fileupload.less diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 5f49bb62..de663d9d 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -108,6 +108,7 @@ + {{#production}} diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 38dd5587..f451074b 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1215,6 +1215,15 @@ +
+
+

{{_i}}Upload button{{/i}}

+

{{_i}}It's possible to use a button to upload files, instead of showing the native browser element.{{/i}}

+ Upload a file +

{{_i}}There is also an interactive file and image upload widgets available. View the Javascript docs for that.{{/i}}

+
+
+
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 57cb4eac..1766b5b5 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -1355,4 +1355,112 @@ $('.myCarousel').carousel({

{{_i}}Initializes an input with a typahead.{{/i}}

- \ No newline at end of file + + + + + +
+
+

{{_i}}Fileupload{{/i}} bootstrap-fileupload.js

+
+ +
+
+

{{_i}}About{{/i}}

+

{{_i}}The file upload plugin allows you to create a visually appealing file or image upload element.{{/i}}

+ {{_i}}Download file{{/i}} +
+ +
+

{{_i}}Examples file upload element{{/i}}

+
+
+
+
+ {{_i}}Select file{{/i}}{{_i}}Change{{/i}} + {{_i}}Remove{{/i}} +
+
+
+
+
+ {{_i}}Select file{{/i}}{{_i}}Change{{/i}} + {{_i}}Remove{{/i}} +
+
+
+
+ +

{{_i}}Example image upload elements{{/i}}

+

{{_i}}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.{{/i}}

+
+
+
+
+
+
+ {{_i}}Select image{{/i}}{{_i}}Change{{/i}} + {{_i}}Remove{{/i}} +
+
+
+
+
+
+
+ {{_i}}Select image{{/i}}{{_i}}Change{{/i}} + {{_i}}Remove{{/i}} +
+
+
+
+
+
+
+ {{_i}}Select image{{/i}}{{_i}}Change{{/i}} + {{_i}}Remove{{/i}} +
+
+ +
+ {{_i}}Select image{{/i}}{{_i}}Change{{/i}} + {{_i}}Remove{{/i}} +
+
+
+
+
+
+ +

{{_i}}Markup{{/i}}

+

{{_i}}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".{{/i}}

+ +

{{_i}}File upload element{{/i}}

+
+<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>
+
+ +

{{_i}}Image upload element{{/i}}

+
+<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">{{_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>
+
+
+
+
diff --git a/js/bootstrap-fileupload.js b/js/bootstrap-fileupload.js new file mode 100644 index 00000000..9b7f7573 --- /dev/null +++ b/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/less/bootstrap.less b/less/bootstrap.less index ea84f489..5f3af554 100644 --- a/less/bootstrap.less +++ b/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"; diff --git a/less/fileupload.less b/less/fileupload.less new file mode 100644 index 00000000..810ee985 --- /dev/null +++ b/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; +}