JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" id="uploadform" enctype="multipart/form-data">
<div id="upload-adm" class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3" style="height:20px;">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="file" id="file"/>
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
<input type="submit" name="submit" value="Upload" class="btn adm-file-btn">
</div>
</div>
</form>
CSS
/*!
* Bootstrap v2.3.1-j6
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat, extended by @ArnoldDaniels.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-file {
overflow: hidden;
position: relative;
vertical-align: middle;
}
.btn-file > input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
transform: translate(-300px, 0) scale(4);
font-size: 23px;
direction: ltr;
cursor: pointer;
}
.fileupload {
margin-bottom: 9px;
}
.fileupload .uneditable-input {
display: inline-block;
margin-bottom: 0px;
vertical-align: middle;
cursor: text;
}
.fileupload .thumbnail {
overflow: hidden;
display: inline-block;
margin-bottom: 5px;
vertical-align: middle;
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;
}
.fileupload-inline .fileupload-controls {
display: inline;
}
.fileupload-new .input-append .btn-file {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.thumbnail-borderless .thumbnail {
border: none;
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow:...
JavaScript
/* ===========================================================
* bootstrap-fileupload.js j2
* http://jasny.github.com/bootstrap/javascript.html#fileupload
* ===========================================================
* Copyright 2012 Jasny BV, Netherlands.
*
* 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.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_
/* FILEUPLOAD PUBLIC CLASS DEFINITION
* ================================= */
var Fileupload = function (element, options) {
this.$element = $(element)
this.type = this.$element.data('uploadtype') || (this.$element.find('.thumbnail').length > 0 ? "image" : "file")
this.$input = this.$element.find(':file')
if (this.$input.length === 0) return
this.name = this.$input.attr('name') || options.name
this.$hidden = this.$element.find('input[type=hidden][name="'+this.name+'"]')
if (this.$hidden.length === 0) {
this.$hidden = $('<input type="hidden" />')
this.$element.prepend(this.$hidden)
}
this.$preview = this.$element.find('.fileupload-preview')
var height = this.$preview.css('height')
if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
this.original = {
'exists': this.$element.hasClass('fileupload-exists'),
'preview': this.$preview.html(),
'hiddenVal': this.$hidden.val()
}
...