JSFiddle - React, Tailwind, and code Playground
HTML
<button type='button' id='bar' name='bar' style=''>Upload</button>
CSS
/*
* jQuery UI CSS Framework 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
* jQuery UI CSS Framework 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*
* To view and modify this theme, visit...
JavaScript
/**
* AJAX Upload ( http://valums.com/ajax-upload/ )
* Copyright (c) Andris Valums
* Licensed under the MIT license ( http://valums.com/mit-license/ )
* Thanks to Gary Haran, David Mark, Corey Burns and others for contributions.
*/
(function() {
/* global window */
/* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */
/**
* Wrapper for FireBug's console.log
*/
function log() {
if (typeof (console) != 'undefined' && typeof (console.log) == 'function') {
Array.prototype.unshift.call(arguments, '[Ajax Upload]');
console.log(Array.prototype.join.call(arguments, ' '));
}
}
/**
* Attaches event to a dom element.
* @param {Element} el
* @param type event name
* @param fn callback This refers to the passed element
*/
function addEvent(el, type, fn) {
if (el.addEventListener) {
el.addEventListener(type, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + type, function() {
fn.call(el);
});
} else {
throw new Error('not supported or DOM not loaded');
}
}
/**
* Attaches resize event to a window, limiting
* number of event fired. Fires only when encounteres
* delay of 100 after series of events.
*
* Some browsers fire event multiple times when resizing
* http://www.quirksmode.org/dom/events/resize.html
*
* @param fn callback This refers to the passed element
*/
function addResizeEvent(fn) {
var timeout;
addEvent(window, 'resize', function() {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(fn, 100);
});
}
// Needs more testing, will be rewriten for next version
// getOffset function copied from jQuery lib (http://jquery.com/)
if...