* @param {File} file
* @return {HTMLLIElement} row
*/
- function addRow(file) {
- var row = document.createElement('li');
+ function addRow(file)
+ {
+ const row = document.createElement('li');
- var name = document.createElement('span');
+ const name = document.createElement('span');
name.textContent = file.name;
name.className = 'file-name';
- var progressIndicator = document.createElement('span');
+ const progressIndicator = document.createElement('span');
progressIndicator.className = 'progress-percent';
progressIndicator.textContent = '0%';
- var progressBar = document.createElement('progress');
+ const progressBar = document.createElement('progress');
progressBar.className = 'file-progress';
progressBar.setAttribute('max', '100');
progressBar.setAttribute('value', '0');
*
* @param {ProgressEvent} evt
*/
- function handleUploadProgress(evt) {
- var xhr = evt.target;
- var bar = xhr.bar;
- var percentIndicator = xhr.percent;
+ function handleUploadProgress(evt)
+ {
+ let xhr = evt.target;
+ let bar = xhr.bar;
+ let percentIndicator = xhr.percent;
/* If we have amounts of work done/left that we can calculate with
(which, unless we're uploading dynamically resizing data, is always), calculate the percentage. */
if (evt.lengthComputable) {
- var progressPercent = Math.floor((evt.loaded / evt.total) * 100);
+ let progressPercent = Math.floor((evt.loaded / evt.total) * 100);
bar.setAttribute('value', progressPercent);
percentIndicator.textContent = progressPercent + '%';
}
*
* @param {ProgressEvent} evt
*/
- function handleUploadComplete(evt) {
- var xhr = evt.target;
- var bar = xhr.bar;
- var row = xhr.row;
- var percentIndicator = xhr.percent;
+ function handleUploadComplete(evt)
+ {
+ let xhr = evt.target;
+ let bar = xhr.bar;
+ let row = xhr.row;
+ let percentIndicator = xhr.percent;
percentIndicator.style.visibility = 'hidden';
bar.style.visibility = 'hidden';
row.removeChild(bar);
row.removeChild(percentIndicator);
- var respStatus = xhr.status;
+ let respStatus = xhr.status;
- var url = document.createElement('span');
+ let url = document.createElement('span');
url.className = 'file-url';
row.appendChild(url);
- var link = document.createElement('a');
+ let link = document.createElement('a');
if (respStatus === 200) {
- var response = JSON.parse(xhr.responseText);
+ let 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);
- var copy = document.createElement('button');
+ const copy = document.createElement('button');
copy.className = 'upload-clipboard-btn';
- var glyph = document.createElement('img');
+ const glyph = document.createElement('img');
glyph.src = 'img/glyphicons-512-copy.png';
copy.appendChild(glyph);
url.appendChild(copy);
- copy.addEventListener("click", function (event) {
+ copy.addEventListener("click", function () {
/* Why create an element? The text needs to be on screen to be
selected and thus copied. The only text we have on-screen is the link
without the http[s]:// part. So, this creates an element with the
See the "Complex Example: Copy to clipboard without displaying
input" section at: https://stackoverflow.com/a/30810322 */
- var element = document.createElement('a');
+ const element = document.createElement('a');
element.textContent = response.files[0].url;
link.appendChild(element);
- var range = document.createRange();
+ let range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
link.textContent = 'File too big!';
url.appendChild(link);
} else {
- var response = JSON.parse(xhr.responseText);
+ let response = JSON.parse(xhr.responseText);
link.textContent = response.description;
url.appendChild(link);
}
* @param {File} file
* @param {HTMLLIElement} row
*/
- function uploadFile(file, row) {
- var bar = row.querySelector('.file-progress');
- var percentIndicator = row.querySelector('.progress-percent');
- var xhr = new XMLHttpRequest();
+ function uploadFile(file, row)
+ {
+ let bar = row.querySelector('.file-progress');
+ let percentIndicator = row.querySelector('.progress-percent');
+ let xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php');
xhr['row'] = row;
xhr.addEventListener('load', handleUploadComplete, false);
xhr.upload.onprogress = handleUploadProgress;
- var form = new FormData();
+ let form = new FormData();
form.append('files[]', file);
xhr.send(form);
}
*
* @param {Event} evt
*/
- function stopDefaultEvent(evt) {
+ function stopDefaultEvent(evt)
+ {
evt.stopPropagation();
evt.preventDefault();
}
* @param {HTMLButtonElement} element
* @param {DragEvent} evt
*/
- function handleDrag(state, element, evt) {
+ function handleDrag(state, element, evt)
+ {
stopDefaultEvent(evt);
- if (state.dragCount == 1) {
+ if (state.dragCount === 1) {
element.textContent = 'Drop it here~';
}
state.dragCount += 1;
* @param {HTMLButtonElement} element
* @param {DragEvent} evt
*/
- function handleDragAway(state, element, evt) {
+ function handleDragAway(state, element, evt)
+ {
stopDefaultEvent(evt);
state.dragCount -= 1;
- if (state.dragCount == 0) {
+ if (state.dragCount === 0) {
element.textContent = 'Select or drop file(s)';
}
}
* @param {HTMLButtonElement} element
* @param {DragEvent} evt
*/
- function handleDragDrop(state, element, evt) {
+ 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);
+ let len = evt.dataTransfer.files.length;
+ for (let i = 0; i < len; i++) {
+ let file = evt.dataTransfer.files[i];
+ let row = addRow(file);
uploadFile(file, row);
}
}
*
* @param {InputEvent} evt
*/
- function uploadFiles(evt) {
- var len = evt.target.files.length;
+ function uploadFiles(evt)
+ {
+ let len = evt.target.files.length;
// For each file, make a row, and upload the file.
- for (var i = 0; i < len; i++) {
- var file = evt.target.files[i];
- var row = addRow(file);
+ for (let i = 0; i < len; i++) {
+ let file = evt.target.files[i];
+ let row = addRow(file);
uploadFile(file, row);
}
}
* @param {HTMLInputElement} target
* @param {InputEvent} evt
*/
- function selectFiles(target, evt) {
+ function selectFiles(target, evt)
+ {
stopDefaultEvent(evt);
target.click();
}
/* Handles the pasting function */
window.addEventListener("paste", e => {
- var len = e.clipboardData.files.length;
- for (var i = 0; i < len; i++) {
- var file = e.clipboardData.files[i];
- var row = addRow(file);
+ let len = e.clipboardData.files.length;
+ for (let i = 0; i < len; i++) {
+ let file = e.clipboardData.files[i];
+ let row = addRow(file);
uploadFile(file, row);
}
});
- /* Set-up the event handlers for the <button>, <input> and the window itself
+ /* Set up the event handlers for the <button>, <input> and the window itself
and also set the "js" class on selector "#upload-form", presumably to
allow custom styles for clients running javascript. */
- var state = {dragCount: 0};
- var uploadButton = document.getElementById('upload-btn');
+ let state = {dragCount: 0};
+ let 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');
+ let 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);
projects / uguu.git / blobdiff