JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.7/backbone.marionette.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="file-uploader1" class="wrapper js"></div>

<div id="file-uploader2" class="wrapper js"></div>

<script type="text/template" id="file-uploader-template">
	<form class="js--upload-form is-droppable">
		<span class="text--center">
			<i class="fa fa-cloud-upload fa-2"></i>
			<span class="js--advanced-upload">Drop files to attach, or <label class="btn btn--link" for="file">browse</label></span>
			<input type="file" name="files[]" id="file" class="js--basic-upload hide" data-multiple-caption="{count} files selected" multiple="" accept=".pdf,.xlsx">
		</span>
		<table class="js--files-list" border="0"></table>
	</form>
</script>

<script type="text/template" id="document-item-view">
<td><a href="<%= data %>" download="<%= name %>" target="_blank"><%= name %></a></td>
<td><%= type %>
<td><button class="btn btn--link js--remove-file"><i class="fa fa-times-circle"></i></button></td>
</script>

CSS

.wrapper {
	margin: 20px;
}

.hide {
	display: none;
}

.text--center {
	display: block;
	text-align: center;
}

.is-droppable {
	border: 1px dashed #ccc;
	// border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	&.is-dragover {
		// color: #fff;
		border-color: #999;
		background-color: #e2e2e2;
	}
}
.btn--link {
	color: #0079c1;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.js .box__file {
	display: none;
}

JavaScript

var isAdvancedUpload = function() {
  var div = document.createElement('div');
  return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();

var tests = {
	filereader	: typeof FileReader != 'undefined',
	dnd			: 'draggable' in document.createElement('span'),
	formdata	: !!window.FormData,
	progress	: "upload" in new XMLHttpRequest
};

var supports = {
	FileReader	: 'FileReader' in window // typeof FileReader != 'undefined'
};

// var support = {
// 	filereader	: document.getElementById('filereader'),
// 	formdata	: document.getElementById('formdata'),
// 	progress	: document.getElementById('progress')
// };
var acceptedTypes = {
	'application/pdf'	: true,
	'image/png'			: true,
	'image/jpeg'		: true,
	'image/gif'			: true
};

const acceptedMimeTypes = {
	'.pdf'	: 'application/pdf',
	'.doc'	: 'application/msword',
	'.docx'	: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
	'.rtf'	: 'text/rtf',
	'.xls'	: '',
	'.xlsx'	: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	'.csv'	: 'text/csv',
	'.jpg'	: 'image/jpeg',
	'.jpeg'	: 'image/jpeg',
	'.txt'	: 'text/plain'
};

var FileModel = Backbone.Model.extend({
	defaults: {
		name				: null,
		type				: null,
		size				: null,
		data				: null,
		lastModified		: null,
		lastModifiedDate	: null
	}
});

var FilesCollection = Backbone.Collection.extend({
	model	: FileModel,
	url		: null
});

var FileView = Marionette.ItemView.extend({
	tagName		: 'tr',
	model		: FileModel,
	// template	: _.template('<a href="<%= data %>" download="<%= name %>" target="_blank"><%= name %></a>'),
	// template	: _.template('<a href="<%= data %>" download="<%= name %>" target="_blank"><%= name %></a> <button class="btn btn--link js--remove-file"><i class="fa fa-times-circle"></i></button>'),
	template	: '#document-item-view',
	
	ui: {
		btnRemoveFile: '.js--remove-file'
	},
	
	events: {
		'click @ui.btnRemoveFile':...