[upload] give filesize-tracker script some polish

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();    
+    }
+});

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,
+            SMALL(
-            $max_total_size > 0 ? SMALL(BR(), "(Max total size is $max_total_kb)") : null,
+                "(",
+                $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("<script>
-                function fileSize(size){
+            window.shm_max_size = $max_size;
-                    var i = Math.floor(Math.log(size) / Math.log(1024));
+            window.shm_max_total_size = $max_total_size;
-                    return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-                }
-                function updateTracker(){
-                    var size = 0;
-                    var upbtn = $(\"#uploadbutton\")[0];
-                    var tracker = $(\"#upload_size_tracker\")[0];
-                    var lockbtn = false;
-
-                    $(\"input[name*='data'][id!='data[]']\").each(function(_,n){
-                        var cancelbtn = $(\"div[name='cancel\"+n.name+\"']\")[0];
-                        var toobig = false;
-                        if (n.files.length){
-                            cancelbtn.style.visibility = 'visible';
-                            for (var i = 0; i<n.files.length; i++){
-                                size += n.files[i].size;
-                                if ($max_size > 0 && n.files[i].size > $max_size){
-                                    toobig = true;
-                                }
-                            }
-                            if (toobig){
-                                lockbtn = true;
-                                n.style = 'color:red';
-                            }else{
-                                n.style = 'color:initial';
-                            }
-                        }else{
-                            n.style = 'color:initial';
-                            cancelbtn.style.visibility = 'hidden';
-                        }
-                    });
-
-                    if (size){
-                        tracker.innerText = 'Total: ' + fileSize(size);
-                        if ($max_total_size > 0 && size > $max_total_size){
-                            lockbtn = true;
-                            tracker.style = 'color:red';
-                        }else{
-                            tracker.style = 'color:initial';
-                        }
-                    }else{
-                        tracker.innerText = '';
-                    }
-                    upbtn.disabled = lockbtn;
-                }
-                window.onload = function(){
-                    $(\"input[name*='data'][id!='data[]']\").change(function(){
-                        updateTracker();
-                    });
-                    updateTracker();
-                }
             </script>")
         );
 
@@ -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"])),
                 )

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 = "
-			<a href='//rule34.paheal.net/wiki/tagging'>Tagging Guide</a>
-		";
-        $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;
-    }
 }