summaryrefslogtreecommitdiffstats
path: root/static/gomf.js
diff options
context:
space:
mode:
Diffstat (limited to 'static/gomf.js')
-rw-r--r--static/gomf.js184
1 files changed, 184 insertions, 0 deletions
diff --git a/static/gomf.js b/static/gomf.js
new file mode 100644
index 0000000..da14d14
--- /dev/null
+++ b/static/gomf.js
@@ -0,0 +1,184 @@
+(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);
+ }
+})();