JSFiddle - React, Tailwind, and code Playground

by pomeh

HTML

<script src="https://raw.githubusercontent.com/enyo/dropzone/ddffdfd3d7ac851f333a65711eebcfd2e2faf6d5/downloads/dropzone.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/enyo/dropzone/ddffdfd3d7ac851f333a65711eebcfd2e2faf6d5/downloads/css/dropzone.css">
	<input type="file" />
	<br />

	Step 1) with an URL parameter<br />
	<button id="plainJSWithURL">plain JS</button>
	<button id="plainJSWithURLKO1">plain JS KO 1</button>
	<button id="plainJSWithURLKO2">plain JS KO 2</button>
	<button id="plainJSWithURLKO3">plain JS KO 3</button>
	<button id="jQueryWithURL">jQuery</button>
	<br /><br />

	Step 2) with a local file using an input type="file" (select a file above before runing the test)<br />
	<button id="plainJSWithInputFile">plain JS</button>
	<button id="jQueryWithInputFileKO">jQuery KO</button>
	<button id="jQueryWithInputFileOK">jQuery OK</button>
	<br /><br />

	Step 3) using DropZone (drop a file in the following area)
	<br />

	<form id="upload" class="dropzone">
		<input type="file" name="file" />
		<input type="submit" />
	</form>

CSS

/* no inline CSS, but external CSS is used */
/* have a look at External Ressources tab */

JavaScript

// test case for http://stackoverflow.com/questions/25427627/dropzone-upload-to-imgur-or-any-other-doamin-not-working

var apiEndpointURL = 'https://api.imgur.com/3/upload';
var imageURL = 'http://placehold.it/300x500';
// change the client ID below or demos won't work !!!
var authorizationHeader = 'Client-ID xxxxxx';

function logArguments(where) {
    return function () {
        console.log(where, arguments);
    };
}

// simple function to convert a file objet into a base64 string
// when done, the callback onSuccess is called
function getFileAsBase64(file, onSuccess) {
    var reRemoveBase64Header = /^data:\w+\/\w+;base64,/;
    var reader = new FileReader();
    
    reader.onload = function(e) {
        var binaryString = e.target.result;
        var withoutHeader = binaryString.replace(reRemoveBase64Header, '');
        
        onSuccess(withoutHeader);
    };
    
    reader.readAsDataURL(file);
}


var tests = {};

tests.plainJSWithURL = function() {
    console.log('Running test plainJSWithURL');
    
    var data = new FormData();
    data.append('image', imageURL);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', apiEndpointURL, true);
    xhr.setRequestHeader('Authorization', authorizationHeader);
    xhr.onload = logArguments('plainJSWithURL.onload');
    xhr.send(data);
};

tests.plainJSWithURLKO1 = function() {
    console.log('Running test plainJSWithURL');
    
    var data = new FormData();
    data.append('image', imageURL);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', apiEndpointURL, true);
    xhr.setRequestHeader('Authorization', authorizationHeader);
    // one header added
    xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send(data);
};

tests.plainJSWithURLKO2 = function() {
    console.log('Running test plainJSWithURL');
    
    var data = new FormData();
    data.append('image', imageURL);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', apiEndpointURL, true);
   ...