JSFiddle - React, Tailwind, and code Playground

by Osman Salihovic

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<form>
    <span class="fileUpload btn btn-default">
        <span class="glyphicon glyphicon-upload"></span> Upload file
        <input type="file" id="uploadFile" />
    </span>
</form>
    
<p id="fileUploadError" class="text-danger hide"></p>

<div class="list-group" id="files"></div>

<script id="fileUploadProgressTemplate" type="text/x-jquery-tmpl">
    <div class="list-group-item">
        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-info" style="width: 0%;"></div>
        </div>
    </div>
</script>

<script id="fileUploadItemTemplate" type="text/x-jquery-tmpl">
    <div class="list-group-item">
        <button type="button" class="close">&times;</button>
        <span class="glyphicon glyphicon-file"></span> File name (type, date, etc)
    </div>
</script>

CSS

.fileUpload {
	position: relative;
	overflow: hidden;
}
.fileUpload input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	opacity: 0;
}
.progress {
    margin-bottom: 0;
}

JavaScript

(function ($))
$("#uploadFile").change(function() {
    var formData = new FormData();
    formData.append('file', this.files[0]);
    
    $("#files").append($("#fileUploadProgressTemplate").tmpl());
    $("#fileUploadError").addClass("hide");
    
    $.ajax({
        url: '/echo/json/',
        type: 'POST',
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', function(evt) {
                    var percent = (evt.loaded / evt.total) * 100;
                    $("#files").find(".progress-bar").width(percent + "%");
                }, false);
            }
            return xhr;
        },
        success: function(data) {
            $("#files").children().last().remove();
            $("#files").append($("#fileUploadItemTemplate").tmpl(data));
            $("#uploadFile").closest("form").trigger("reset");
        },
        error: function() {
            $("#fileUploadError").removeClass("hide").text("An error occured!");
            $("#files").children().last().remove();
            $("#uploadFile").closest("form").trigger("reset");
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    }, 'json');
});

}(jQuery));

(function ( $ ) {
	$.fn.greenify = function( options ) {
		var settings = $.extend({
			//These are the defaults.
			color: "#556b2f",
			backgroundColor: "white"
		}, options );
 
		return this.css({
			color: settings.color,
			backgroundColor: settings.backgroundColor
		});
	};
}(jQuery));

$( "div" ).greenify({
		backgroundColor: "red",
    color: "white"
});