[upload] give filesize-tracker script some polish

This commit is contained in:
Shish 2023-12-31 23:55:27 +00:00 committed by Shish
parent 0f52b54667
commit 3462a81c28
3 changed files with 74 additions and 136 deletions

56
ext/upload/script.js Normal file
View file

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

View file

@ -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("<script>
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 = $(\"#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();
}
window.shm_max_size = $max_size;
window.shm_max_total_size = $max_total_size;
</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"])),
)

View file

@ -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&nbsp;Tags")),
TD(["colspan" => "5"], INPUT(["name" => "tags", "type" => "text", "placeholder" => "tagme", "autocomplete" => "off"]))
),
TR(
TD(["width" => "20"], rawHTML("Common&nbsp;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;
}
}