diff options
author | adam <adam@> | 2021-02-12 16:40:29 +0200 |
---|---|---|
committer | adam <adam@> | 2021-02-12 16:40:29 +0200 |
commit | 6a6c2249ddc649bb114ce8a5cc619ae16a43d20f (patch) | |
tree | 6b7dacc563a69809962a7978287542f1d71a4063 /loggedin.js | |
parent | 0c3d535a341dcefd702982715f6d20275a0f512d (diff) | |
parent | 6992510faf7de95b37d151da3d5e6f7026af343e (diff) | |
download | fileup-6a6c2249ddc649bb114ce8a5cc619ae16a43d20f.tar.gz |
Merge branch 'master' of https://github.com/alexvitkov/india
Diffstat (limited to 'loggedin.js')
-rw-r--r-- | loggedin.js | 181 |
1 files changed, 162 insertions, 19 deletions
diff --git a/loggedin.js b/loggedin.js index d774e16..78a7099 100644 --- a/loggedin.js +++ b/loggedin.js @@ -1,18 +1,35 @@ -var FORM_ASYNC = false; +var FORM_ASYNC = true; const upload_form = document.getElementById("upload_form"); const the_file = document.getElementById("the_file"); const filename_input = document.getElementById("filename"); const upload_btn = document.getElementById("upload_btn"); +const the_path = document.getElementById("the_path"); const current_directory = document.getElementById("current_directory"); the_file.onchange = on_file_added; -var files = []; +var pwd = []; +const pending_uploads = []; -const pwd = "/"; +var context_menu = null; -const pending_uploads = []; +class FileView { + constructor(filename, visuals, mimetype, is_directory) { + this.filename = filename; + this.visuals = visuals; + this.mimetype = mimetype; + this.is_directory = is_directory; + } +} + +class PendingUpload { + constructor(fileview) { + this.fileview = fileview; + } +} + +var files = []; function on_file_added(_e) { if (the_file.files.length >= 1) { @@ -23,71 +40,197 @@ function on_file_added(_e) { return; } + var fileview = add_file_visuals(filename_input.value, false, "pending"); + // Send the form asynchronously through the fetch api fetch(upload_form.action, { method: upload_form.method, body: new FormData(upload_form) }).then((resp) => { if (resp.status == 200) { - add_file_visuals(filename_input.value, true); - } - else { + done_upload(fileview); + } else { alert("Upload failed"); } }, () => { alert("Upload failed") }); - - + + pending_uploads.push(fileview); } else { alert("No files selected"); } +} + +function done_upload(fileview) { + var index = pending_uploads.indexOf(fileview); + if (index >= 0) + pending_uploads.splice(index, 1); + load_dir(); } -function load_dir(pwd) { +function load_dir() { + + while (the_path.children.length > 1) + the_path.removeChild(the_path.lastChild); + + for (let i = 0; i < pwd.length; i++) { + var d = pwd[i]; + + var separator_div = document.createElement('div'); + separator_div.classList.add('separator'); + the_path.appendChild(separator_div); + separator_div.innerText = "ยป"; + + var entry = document.createElement('button'); + entry.classList.add('pathentry'); + entry.innerText = d; + the_path.appendChild(entry); + + entry.onclick = () => { + pwd.length = i + 1; + load_dir(); + } + } + var data = new FormData(); - data.append('path', '/'); + data.append('path', get_path()); var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/readdir.php', true); xhr.onload = function () { for (const f of files) - f[1].remove(); + f.visuals.remove(); files = []; var json = JSON.parse(this.responseText); for (const f of json) { - add_file_visuals(f.name, f.mimetype); + add_file_visuals(f.name, f.is_directory, f.mimetype); } }; xhr.send(data); } -function add_file_visuals(name, mimetype) { +function delete_file(filename) { + var file_full_path = get_path() + filename; + + var data = new FormData(); + data.append('path', file_full_path); + + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/php/delete.php', true); + xhr.onload = function () { + load_dir(); + }; + xhr.send(data); +} + +function rename_file(filename) { + var file_full_path = get_path() + filename; + + var new_name = prompt(`Rename ${filename} to`, filename); + if (!new_name) + return; + + var data = new FormData(); + data.append('path', file_full_path); + data.append('new_name', new_name); + + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/php/rename.php', true); + xhr.onload = function () { + load_dir(); + }; + xhr.send(data); +} + +function add_file_visuals(name, is_directory, mimetype) { var fileDiv = document.createElement('div'); var img = document.createElement('img'); var filename = document.createElement('div'); - img.src="/mimeicons/application-pdf.png"; + if (is_directory) { + img.src="/mimeicons/directory.png"; + fileDiv.onclick = () => { + pwd.push(name); + load_dir(); + } + } else { + img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`; + } + + fileDiv.oncontextmenu = (e) => { + context(e, [ + ['Open', () => { + if (is_directory) { + pwd.push(name); + load_dir(); + } else { + alert('not implemented'); + } + }], + ['Rename', () => { rename_file(name); }], + ['Share', () => {alert('not implemented')}], + ['Delete', () => { delete_file(name); }], + ]); + e.preventDefault(); + } + fileDiv.classList.add('file'); filename.classList.add('filename'); filename.innerText = name; + if (mimetype == "pending") + fileDiv.classList.add('pending'); + fileDiv.appendChild(img); fileDiv.appendChild(filename); current_directory.appendChild(fileDiv); - files.push([name, fileDiv]); - - return fileDiv; + var file = new FileView(name, fileDiv, mimetype, is_directory); + files.push(file); + return file; } function begin_upload() { the_file.click(); } -load_dir("/"); +function context(e, entries) { + if (context_menu) + context_menu.remove(); + + context_menu = document.createElement('ul'); + context_menu.classList.add('context'); + + context_menu.style.left = e.clientX + "px"; + context_menu.style.top = e.clientY + "px"; + + + for (const e of entries) { + const li = document.createElement('li'); + li.innerText = e[0]; + li.onclick = e[1]; + context_menu.appendChild(li); + } + + document.body.appendChild(context_menu); +} + +function get_path() { + var path = "/"; + for (const d of pwd) + path += d + "/"; + return path; +} + +document.body.onclick = () => { + if (context_menu) + context_menu.remove(); +} + +load_dir(); |