JSFiddle - React, Tailwind, and code Playground

by popsul

HTML

<form >
    <input type="file" id="file" />
</form>

<script>
    $(window).load(function () {
        $('#file').uploadeable({
            droppable: 'body'
        });
    });
</script>

CSS

body {
    height: 500px;
    width:500px;
    position: relative;
}
.droppable:after {
    content: 'DROPDROPDROP!!1';
    background:#f00;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%), translateY(-50%);
}

JavaScript

!function($) {

	var dummy = function(){};

	$.fn.uploadeable = function(params) {
		console.log(params);
		params = params || {};
		params.start = params.start || dummy;
		params.done = params.done || dummy;
		params.progress = params.progress || dummy;
		params.fail = params.fail || dummy;
		var that = $(this);
		if ($(this).is('input[type=file]')) {
			var success = function(e) {
				if (typeof e === 'object' && e.response) {
					params.done.call($(this), e.response);
				} else {
					params.fail.call($(this), e.error || 'Unknown error');
				}
				$(this).getForm().trigger('reset');
			};
			var failed = function () {
				params.fail.call($(this), 'Unknown error');
			};

			var doUpload = function doUpload(formData) {
				var xhr = function() {  // custom xhr
					var myXhr = $.ajaxSettings.xhr();
					if(myXhr.upload){ // check if upload property exists
						myXhr.upload.addEventListener('progress', params.progress, false); // for handling the progress of the upload
					}
					return myXhr;
				};
				params.start.call($(this));
				var options = {
					url: params.url || $(this).getForm().prop('action'),
					type: 'POST',
					dataType: 'json',
					data: formData,
					xhr: xhr,
					async: true,
					success: success,
					failed: failed,
					cache: false,
					contentType: false,
					processData: false
				};
				$.ajax(options);
			};

			$(this).change(function () {
				if ($(this).val()) {
					var formData = new FormData($(this).getForm()[0]);
					doUpload(formData);
				}
			});

			if (params.droppable) {
				$(params.droppable).bind('dragover', function (e) {
					e.stopPropagation();
					e.preventDefault();
					$(this).addClass('droppable');
					return false;
				}).bind('dragleave', function (e) {
					e.stopPropagation();
					e.preventDefault();
					$(this).removeClass('droppable');
					return false;
				}).bind('drop', function (e) {
					$(this).removeClass('droppable');
					if (e.originalEvent.dataTransfer.files.length)...