[upload] give filesize-tracker script some polish
This commit is contained in:
parent
0f52b54667
commit
3462a81c28
3 changed files with 74 additions and 136 deletions
56
ext/upload/script.js
Normal file
56
ext/upload/script.js
Normal 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();
|
||||
}
|
||||
});
|
|
@ -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"])),
|
||||
)
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue