+html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite,

+code, b, u, i, form, label, article, aside, footer, header, menu, nav, section {

+ margin: 0;

+ padding: 0;

+ border: 0;

+ font-size: 100%;

+ font: inherit;

+ vertical-align: baseline;

+}

+

+article, aside, footer, header, menu, nav, section {

+ display: block;

+}

+

+body {

+ line-height: 1.25;

+ padding: 1em;

+ color: #000;

+ background-color: #fff;

+ max-width: 800px;

+ margin-left: auto;

+ margin-right: auto;

+}

+

+html {

+ font-family: "DejaVu Sans", sans-serif;

+}

+

+h1 {

+ font-size: 200%;

+ font-weight: bold;

+ border-bottom: 1px solid black;

+ margin-bottom: 0.5em;

+}

+

+input, select, textarea, code {

+ border: 1px solid black;

+ background: inherit;

+ font: inherit;

+ font-family: "DejaVu Sans Mono", monospace;

+}

+

+progress {

+ appearance: none;

+ background-color: inherit;

+ color: inherit;

+ border: 1px solid black;

+ font: inherit;

+}

+

+input, select {

+ font: inherit;

+ cursor: pointer;

+}

+

+.file span {

+ padding-left: 0.25em;

+ padding-right: 0.25em;

+ padding-top: 2em;

+ padding-bottom: 2em;

+ overflow: hidden;

+ width: 100%;

+ text-align: center;

+}

+

+.file {

+ padding-top: 2em;

+ padding-bottom: 2em;

+ height: 22px;

+ min-height: 22px;

+ position: relative;

+ border: 1px solid black;

+ margin-right: 0.2em;

+ width: 100%;

+}

+

+main form {

+ margin-top: 1em;

+ margin-bottom: 1em;

+ display: flex;

+}

+

+.file input[type=file] {

+ margin-top: -2em;

+ padding-top: 2em;

+ padding-bottom: 2em;

+ position: relative;

+ text-align: right;

+ opacity: 0;

+ filter: alpha(opacity: 0);

+ -moz-opacity: 0;

+ z-index: 2;

+ width: 100%;

+}

+

+.file span {

+ position: absolute;

+ top: 0px;

+ left: 0px;

+ z-index: 1;

+}

+

+.file:hover {

+ background-color: #eee;

+}

+

+input:disabled {

+ background-color: #ddd;

+}

+

+b {

+ font-weight: bold;

+}

+

+i {

+ font-style: italic;

+}

+

+nav {

+ margin-top: 2em;

+ list-style-type: none;

+ font-size: 80%;

+ text-align: center;

+ font-weight: bold;

+}

+

+nav a {

+ display: inline;

+ cursor: pointer;

+ font-weight: normal;

+ border: none;

+ background: inherit;

+ color: inherit;

+ padding: 0;

+ font: inherit;

+ font-weight: normal;

+ text-decoration: none;

+}

+

+nav a:hover {

+ text-decoration: underline;

+}

+

+nav li {

+ display: inline-block;

+}

+

+nav li:after {

+ content: " | ";

+ white-space: pre;

+ cursor: default;

+ text-decoration: none;

+ display: inline-block;

+ font-weight: normal;

+}

+

+nav li:last-child:after {

+ content: "";

+}

+(function() {

+ var gomfload = function() {

+ "use strict";

+

+ var required = ['FormData', 'XMLHttpRequest'];

+ for (var i=0; i<required.length; ++i) {

+ if (typeof window[required[i]] === 'undefined') {

+ console.log('browser does not support window.' + required[i] + ', Gomf JS disabled');

+ return;

+ }

+ }

+

+ var fileName = document.querySelector('main form span');

+ var fileDiv = document.querySelector('main form div');

+ var fileSubmit = document.querySelector('#file-submit');

+ var fileInput = document.querySelector('#file');

+ var resultList = document.querySelector('#results');

+ var maxSize = parseInt(fileInput.attributes['data-max-size'].value);

+

+ if (!Element.prototype.remove) {

+ Element.prototype.remove = function() {

+ this.parentElement.removeChild(this);

+ }

+ }

+

+ var upload = function(files) {

+ if (files.length ==0) {

+ alert('No files selected');

+ fileInput.value = '';

+ updateName();

+ return;

+ }

+

+ for (var i=0; i<files.length; ++i) {

+ if (files[i].size > maxSize) {

+ alert('File ' + files[i].name + ' too large, maximum allowed size is ' + humanize(maxSize));

+ fileInput.value = '';

+ updateName();

+ return;

+ }

+ }

+

+ for (var i=0; i<files.length; ++i) {

+ uploadFile(files[i]);

+ }

+

+ fileInput.value = '';

+ updateName();

+ };

+

+ var uploadFile = function(file) {

+ var xhr = new XMLHttpRequest();

+

+ var formData = new FormData();

+ formData.append('files[]', file);

+

+ var resultItem = document.createElement('li');

+ var name = document.createElement('b');

+ name.appendChild(document.createTextNode(file.name));

+ resultItem.appendChild(name);

+ resultItem.appendChild(document.createTextNode(': '));

+ var progressBar = document.createElement('progress');

+ progressBar.min = 0;

+ progressBar.max = 100;

+ progressBar.value = 0;

+ resultItem.appendChild(progressBar);

+ var progressText = document.createElement('span');

+ progressText.textContent = ' 0% - 0/0';

+ resultItem.appendChild(progressText);

+ resultList.appendChild(resultItem);

+

+ xhr.upload.addEventListener('progress', function(e) {

+ if (e.lengthComputable) {

+ progressBar.max = e.total;

+ progressBar.value = e.loaded;

+ progressText.textContent = ' ' + (Math.round(e.loaded / e.total * 10000) / 100) + '% - ' + humanize(e.loaded) + ' / ' + humanize(e.total);

+ } else {

+ progressBar.value = '';

+ progressText.textContent = '';

+ }

+ }, false);

+

+ xhr.addEventListener('readystatechange', function() {

+ if (xhr.readyState == 4) {

+ fileInput.value = '';

+ progressBar.remove();

+ progressText.remove();

+ var resp = xhr.responseText.replace(/\s$/, '');;

+ //if (resp.indexOf('http') == 0) {

+ if (xhr.status == 200) {

+ var a = document.createElement('a');

+ a.href = resp;

+ a.textContent = resp;

+ var input = document.createElement('input');

+ input.type = 'text';

+ input.readOnly = true;

+ input.value = resp;

+ console.log(input);

+ console.log(resp);

+ console.log(input.value);

+ console.log(input.value.length);

+ input.size = input.value.length;

+ input.addEventListener('click', function() {

+ this.select();

+ });

+ resultItem.appendChild(a);

+ resultItem.appendChild(document.createTextNode(' '));

+ resultItem.appendChild(input);

+ } else {

+ var span = document.createElement('span');

+ span.style.color = 'red';

+ span.textContent = resp;

+ resultItem.appendChild(span);

+ }

+ updateName();

+ }

+ });

+

+ var postPath = 'upload.php?output=text';

+

+ xhr.open('POST', postPath);

+

+ xhr.send(formData);

+ };

+

+ var humanize = function(n) {

+ var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];

+ var i = 0;

+ while (n >= 1024 && i < units.length-1) {

+ n /= 1024;

+ ++i;

+ }

+ return (Math.round(n*10)/10) + ' ' + units[i];

+ };

+

+ var submit = function(e) {

+ upload(fileInput.files);

+ e.preventDefault();

+ };

+

+ var updateName = function(files) {

+ files = files || fileInput.files;

+ if (files.length > 0) {

+ if (files.length == 1) {

+ fileName.textContent = files[0].name;

+ } else {

+ fileName.textContent = files.length + ' files selected';

+ }

+ } else {

+ fileName.textContent = fileName.originalText;

+ }

+ };

+

+ var dragenter = function(e) {

+ e.stopPropagation();

+ e.preventDefault();

+ };

+

+ var drop = function(e) {

+ e.stopPropagation();

+ e.preventDefault();

+ upload(e.dataTransfer.files);

+ };

+

+ fileInput.addEventListener('change', submit);

+ fileInput.addEventListener('dragenter', dragenter);

+ fileInput.addEventListener('dragover', dragenter);

+ fileInput.addEventListener('drop', drop);

+

+ fileName.textContent = 'Select or drop files here';

+ fileName.originalText = fileName.textContent;

+ fileDiv.className = 'file';

+ fileInput.multiple = 'multiple';

+ fileSubmit.style.display = 'none';

+

+ updateName();

+ };

+

+ if (document.readyState !== 'loading') {

+ gomfload();

+ } else {

+ document.addEventListener('DOMContentLoaded', gomfload);

+ }

+})();