github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-23 05:08:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added fileupload

Browse Source 
Added fileupload.less and bootstrap-fileupload.js
Added file/image upload to docs
This commit is contained in:
Arnold Daniels
2012-04-02 13:52:24 +02:00
parent c8c4d5b392
commit 32bd4d9f98
6 changed files with 245 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/templates/layout.mustache vendored
View File

@@ -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}}

9
docs/templates/pages/base-css.mustache vendored
View File

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

110
docs/templates/pages/javascript.mustache vendored
View File

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