summaryrefslogtreecommitdiffstats
path: root/static/pomf.js
diff options
context:
space:
mode:
authorclsr <clsr@clsr.net>2016-06-16 02:18:59 +0200
committerclsr <clsr@clsr.net>2016-06-16 02:18:59 +0200
commit77fb1d63635bb61b26296b742d2d57ea40566884 (patch)
tree4f9c035a3b157f06ff13525931c4d865b3f1667b /static/pomf.js
downloadgomf-web-pomf-0.1.0.tar.gz
gomf-web-pomf-0.1.0.zip
Initial commit; forked from pantsu/pomfv0.1.0
Diffstat (limited to 'static/pomf.js')
-rw-r--r--static/pomf.js176
1 files changed, 176 insertions, 0 deletions
diff --git a/static/pomf.js b/static/pomf.js
new file mode 100644
index 0000000..dfa047a
--- /dev/null
+++ b/static/pomf.js
@@ -0,0 +1,176 @@
+document.addEventListener('DOMContentLoaded', function() {
+ /**
+ * Copyright (c) 2016 Luminarys <postmaster@gensok.io>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+ function addRow(file) {
+ var row = document.createElement('li');
+
+ var name = document.createElement('span');
+ name.textContent = file.name;
+ name.className = 'file-name';
+
+ var progressIndicator = document.createElement('span');
+ progressIndicator.className = 'progress-percent';
+ progressIndicator.textContent = '0%';
+
+ var progressBar = document.createElement('progress');
+ progressBar.className = 'file-progress';
+ progressBar.setAttribute("max", "100");
+ progressBar.setAttribute("value", "0");
+
+ row.appendChild(name);
+ row.appendChild(progressBar);
+ row.appendChild(progressIndicator);
+
+ document.getElementById('upload-filelist').appendChild(row);
+ return row;
+ }
+
+ function handleUploadProgress(evt) {
+ var xhr = evt.target;
+ var bar = xhr.bar;
+ var percentIndicator = xhr.percent;
+
+ if (evt.lengthComputable) {
+ var progressPercent = Math.floor((evt.loaded / evt.total) * 100);
+ bar.setAttribute("value", progressPercent);
+ percentIndicator.textContent = progressPercent + '%';
+ }
+ }
+
+ function handleUploadComplete(evt) {
+ var xhr = evt.target;
+ var bar = xhr.bar;
+ var row = xhr.row;
+ var percentIndicator = xhr.percent;
+
+ percentIndicator.style.visibility = "hidden";
+ bar.style.visibility = "hidden";
+ row.removeChild(bar);
+ row.removeChild(percentIndicator);
+ var respStatus = xhr.status;
+
+ var url = document.createElement('span');
+ url.className = 'file-url';
+ row.appendChild(url);
+
+ var link = document.createElement('a');
+ if (respStatus === 200) {
+ var response = JSON.parse(xhr.responseText);
+ if (response.success) {
+ link.textContent = response.files[0].url.replace(/.*?:\/\//g, "");
+ link.href = response.files[0].url;
+ url.appendChild(link);
+ } else {
+ bar.innerHTML = 'Error: ' + response.reason;
+ }
+ } else if (respStatus === 413) {
+ link.textContent = 'File Too big!';
+ url.appendChild(link);
+ } else {
+ link.textContent = 'Server error!';
+ url.appendChild(link);
+ }
+ }
+
+ function uploadFile(file, row) {
+ var bar = row.querySelector('.file-progress');
+ var percentIndicator = row.querySelector('.progress-percent');
+ var xhr = new XMLHttpRequest();
+ xhr.open('POST', '/upload.php?output=json');
+
+ xhr["row"] = row;
+ xhr["bar"] = bar;
+ xhr["percent"] = percentIndicator;
+ xhr.upload["bar"] = bar;
+ xhr.upload["percent"] = percentIndicator;
+
+ xhr.addEventListener('load', handleUploadComplete, false);
+ xhr.upload.onprogress = handleUploadProgress;
+
+ var form = new FormData();
+ form.append('files[]', file);
+ xhr.send(form);
+ }
+
+ function stopDefaultEvent(evt) {
+ evt.stopPropagation();
+ evt.preventDefault();
+ }
+
+ function handleDrag(state, element, evt) {
+ stopDefaultEvent(evt);
+ if (state.dragCount == 1) {
+ element.textContent = "Drop it here~";
+ }
+ state.dragCount += 1;
+ }
+
+ function handleDragAway(state, element, evt) {
+ stopDefaultEvent(evt);
+ state.dragCount -= 1;
+ if (state.dragCount == 0) {
+ element.textContent = "Select or drop file(s)";
+ }
+ }
+
+ function handleDragDrop(state, element, evt) {
+ stopDefaultEvent(evt);
+ handleDragAway(state, element, evt);
+ var len = evt.dataTransfer.files.length;
+ for (var i = 0; i < len; i++) {
+ var file = evt.dataTransfer.files[i];
+ var row = addRow(file);
+ uploadFile(file, row);
+ }
+ }
+
+ function uploadFiles(evt) {
+ var len = evt.target.files.length;
+ for (var i = 0; i < len; i++) {
+ var file = evt.target.files[i];
+ var row = addRow(file);
+ uploadFile(file, row);
+ }
+ }
+
+ function selectFiles(target, evt) {
+ stopDefaultEvent(evt);
+ target.click();
+ }
+
+ var state = { dragCount: 0 };
+ var uploadButton = document.getElementById('upload-btn');
+ window.addEventListener('dragenter', handleDrag.bind(this, state, uploadButton), false);
+ window.addEventListener('dragleave', handleDragAway.bind(this, state, uploadButton), false);
+ window.addEventListener('drop', handleDragAway.bind(this, state, uploadButton), false);
+ window.addEventListener('dragover', stopDefaultEvent, false);
+
+ var uploadInput = document.getElementById('upload-input');
+ uploadInput.addEventListener('change', uploadFiles);
+ uploadButton.addEventListener('click', selectFiles.bind(this, uploadInput));
+ uploadButton.addEventListener('drop', handleDragDrop.bind(this, state, uploadButton), false);
+
+
+ // no-js form override
+ document.getElementById('upload-form').className += ' form-js'
+});