From 3462a81c28c84c244093cd43daa92d3b6c0537f2 Mon Sep 17 00:00:00 2001 From: Shish Date: Sun, 31 Dec 2023 23:55:27 +0000 Subject: [PATCH] [upload] give filesize-tracker script some polish --- ext/upload/script.js | 56 ++++++++++++++++++++++ ext/upload/theme.php | 79 ++++++++------------------------ themes/rule34v2/upload.theme.php | 75 ------------------------------ 3 files changed, 74 insertions(+), 136 deletions(-) create mode 100644 ext/upload/script.js diff --git a/ext/upload/script.js b/ext/upload/script.js new file mode 100644 index 00000000..14eef320 --- /dev/null +++ b/ext/upload/script.js @@ -0,0 +1,56 @@ +function fileSize(size) { + var i = Math.floor(Math.log(size) / Math.log(1024)); + return (size / Math.pow(1024, i)).toFixed(2) * 1 + ['B', 'kB', 'MB', 'GB', 'TB'][i]; +} +function updateTracker() { + var size = 0; + var upbtn = document.getElementById("uploadbutton"); + var tracker = document.getElementById("upload_size_tracker"); + var lockbtn = false; + + // check that each individual file is less than the max file size + document.querySelectorAll("#large_upload_form input[type='file']").forEach((input) => { + var cancelbtn = document.getElementById("cancel"+input.id); + var toobig = false; + if (input.files.length) { + if(cancelbtn) cancelbtn.style.visibility = 'visible'; + for (var i = 0; i < input.files.length; i++) { + size += input.files[i].size; + if (window.shm_max_size > 0 && input.files[i].size > window.shm_max_size) { + toobig = true; + } + } + if (toobig) { + lockbtn = true; + input.style = 'color:red'; + } else { + input.style = 'color:initial'; + } + } else { + if(cancelbtn) cancelbtn.style.visibility = 'hidden'; + input.style = 'color:initial'; + } + }); + + // check that the total is less than the max total size + if (size) { + tracker.innerText = fileSize(size); + if (window.shm_max_total_size > 0 && size > window.shm_max_total_size) { + lockbtn = true; + tracker.style = 'color:red'; + } else { + tracker.style = 'color:initial'; + } + } else { + tracker.innerText = '0MB'; + } + upbtn.disabled = lockbtn; +} +document.addEventListener('DOMContentLoaded', () => { + if(document.getElementById("upload_size_tracker")) { + document.querySelectorAll("#large_upload_form input[type='file']").forEach((el) => { + el.addEventListener('change', updateTracker); + }); + updateTracker(); + } +}); diff --git a/ext/upload/theme.php b/ext/upload/theme.php index 95718e2f..7c9f1c4d 100644 --- a/ext/upload/theme.php +++ b/ext/upload/theme.php @@ -17,6 +17,7 @@ use function MicroHTML\NOSCRIPT; use function MicroHTML\DIV; use function MicroHTML\BR; use function MicroHTML\A; +use function MicroHTML\SPAN; use function MicroHTML\P; @@ -43,7 +44,7 @@ class UploadTheme extends Themelet $max_kb = to_shorthand_int($max_size); $max_total_size = parse_shorthand_int(ini_get('post_max_size')) - 102400; //leave room for http request data $max_total_kb = to_shorthand_int($max_total_size); - $upload_list = $this->h_upload_list_1(); + $upload_list = $this->build_upload_list(); $form = SHM_FORM("upload", "POST", true, "file_upload"); $form->appendChild( @@ -58,10 +59,6 @@ class UploadTheme extends Themelet TD(["colspan" => "5"], INPUT(["name" => "source", "type" => "text"])) ), $upload_list, - TR( - TD(["colspan" => $tl_enabled ? 2 : 4,"id" => "upload_size_tracker"], ""), - TD(["colspan" => 2], ""), - ), TR( TD(["colspan" => "6"], INPUT(["id" => "uploadbutton", "type" => "submit", "value" => "Post"])) ), @@ -69,61 +66,17 @@ class UploadTheme extends Themelet ); $html = emptyHTML( $form, - $max_size > 0 ? SMALL("(Max file size is $max_kb)") : null, - $max_total_size > 0 ? SMALL(BR(), "(Max total size is $max_total_kb)") : null, + SMALL( + "(", + $max_size > 0 ? "Per-file limit: $max_kb" : null, + $max_total_size > 0 ? " / Total limit: $max_total_kb" : null, + " / Current total: ", + SPAN(["id" => "upload_size_tracker"], "0KB"), + ")" + ), rawHTML("") ); @@ -136,7 +89,7 @@ class UploadTheme extends Themelet } } - protected function h_upload_list_1(): HTMLElement + protected function build_upload_list(): HTMLElement { global $config; $upload_list = emptyHTML(); @@ -155,7 +108,11 @@ class UploadTheme extends Themelet for ($i = 0; $i < $upload_count; $i++) { $upload_list->appendChild( TR( - TD(["colspan" => $tl_enabled ? 2 : 4], DIV(["name" => "canceldata{$i}[]","style" => "display:inline;margin-right:5px;font-size:15px;visibility:hidden;","onclick" => "$(\"input[name='data{$i}[]']\")[0].value='';updateTracker();"], "✖"), INPUT(["type" => "file", "name" => "data{$i}[]", "accept" => $accept, "multiple" => true])), + TD( + ["colspan" => $tl_enabled ? 2 : 4], + DIV(["id" => "canceldata{$i}", "style" => "display:inline;margin-right:5px;font-size:15px;visibility:hidden;","onclick" => "document.getElementById('data{$i}').value='';updateTracker();"], "✖"), + INPUT(["type" => "file", "id"=>"data{$i}", "name" => "data{$i}[]", "accept" => $accept, "multiple" => true]) + ), $tl_enabled ? TD(["colspan" => "2"], INPUT(["type" => "text", "name" => "url{$i}"])) : emptyHTML(), TD(["colspan" => "2"], INPUT(["type" => "text", "name" => "tags{$i}", "class" => "autocomplete_tags"])), ) diff --git a/themes/rule34v2/upload.theme.php b/themes/rule34v2/upload.theme.php index 31b088eb..a40f7f4c 100644 --- a/themes/rule34v2/upload.theme.php +++ b/themes/rule34v2/upload.theme.php @@ -35,85 +35,10 @@ class CustomUploadTheme extends UploadTheme $page->add_block(new Block("Upload", "Disk nearly full, uploads disabled", "head", 20)); } - // override to add link to tagging guide - public function display_page(Page $page): void - { - global $config, $page; - - $tl_enabled = ($config->get_string(UploadConfig::TRANSLOAD_ENGINE, "none") != "none"); - $max_size = $config->get_int(UploadConfig::SIZE); - $max_kb = to_shorthand_int($max_size); - $upload_list = $this->h_upload_list_1(); - - $form = SHM_FORM("upload", "POST", true, "file_upload"); - $form->appendChild( - TABLE( - ["id" => "large_upload_form", "class" => "vert"], - TR( - TD(["width" => "20"], rawHTML("Common Tags")), - TD(["colspan" => "5"], INPUT(["name" => "tags", "type" => "text", "placeholder" => "tagme", "autocomplete" => "off"])) - ), - TR( - TD(["width" => "20"], rawHTML("Common Source")), - TD(["colspan" => "5"], INPUT(["name" => "source", "type" => "text"])) - ), - $upload_list, - TR( - TD(["colspan" => "6"], INPUT(["id" => "uploadbutton", "type" => "submit", "value" => "Post"])) - ), - ) - ); - $html = emptyHTML( - $form, - SMALL("(Max file size is $max_kb)") - ); - - $page->set_title("Upload"); - $page->set_heading("Upload"); - $page->add_block(new NavBlock()); - $page->add_block(new Block("Upload", $html, "main", 20)); - if ($tl_enabled) { - $page->add_block(new Block("Bookmarklets", (string)$this->h_bookmarklets(), "left", 20)); - } - $html = " - Tagging Guide - "; - $page->add_block(new Block(null, $html, "main", 19)); - } - // override to remove small uploader and just show a link to // the big page protected function build_upload_block(): HTMLElement { return A(["href" => make_link("upload"), "style" => 'font-size: 2rem; display: block;'], "Upload"); } - - protected function h_upload_list_1(): HTMLElement - { - global $config; - $upload_list = emptyHTML(); - $upload_count = $config->get_int(UploadConfig::COUNT); - $tl_enabled = ($config->get_string(UploadConfig::TRANSLOAD_ENGINE, "none") != "none"); - $accept = $this->get_accept(); - - $upload_list->appendChild( - TR( - TD(["colspan" => $tl_enabled ? 2 : 4], "Files"), - $tl_enabled ? TD(["colspan" => "2"], "URLs") : emptyHTML(), - TD(["colspan" => "2"], "Post-Specific Tags"), - ) - ); - - for ($i = 0; $i < $upload_count; $i++) { - $upload_list->appendChild( - TR( - TD(["colspan" => $tl_enabled ? 2 : 4], INPUT(["type" => "file", "name" => "data{$i}[]", "accept" => $accept, "multiple" => true])), - $tl_enabled ? TD(["colspan" => "2"], INPUT(["type" => "text", "name" => "url{$i}"])) : emptyHTML(), - TD(["colspan" => "2"], INPUT(["type" => "text", "name" => "tags{$i}", "autocomplete" => "off"])), - ) - ); - } - - return $upload_list; - } }