1
0
Fork 0

Improvements to form submissions, show images

pull/17/head
Ambrose Chua 2021-05-07 21:34:18 +08:00
parent 36cdb9aa8b
commit af66932295
6 changed files with 67 additions and 46 deletions

View File

@ -27,9 +27,9 @@ let setSelected = (files) => {
const hasDirectory = files.reduce((a, f) => a || f.type == "directory", false);
const totalSize = files.map(f => f.size).reduce((a, b) => a + b);
if (hasDirectory) {
$(".multi-files-total").text("Unknown");
$(".multi-files-total").val("");
} else {
$(".multi-files-total").text(filesize(totalSize));
$(".multi-files-total").val(filesize(totalSize));
}
};

View File

@ -490,6 +490,16 @@ if (shellable || cmdable) {
});
}
const EXT_IMAGES = [".jpg", ".jpeg", ".png", ".webp", ".svg", ".gif", ".tiff"];
function isimage(f) {
for (const ext of EXT_IMAGES) {
if (f.endsWith(ext)) {
return true;
}
}
return false;
}
app.get("/*", (req, res) => {
if (res.stats.error) {
res.render("list", flashify(req, {
@ -525,6 +535,7 @@ app.get("/*", (req, res) => {
resolve({
name: f,
isdirectory: stats.isDirectory(),
isimage: isimage(f),
size: stats.size
});
});

View File

@ -1,41 +1,48 @@
{{> navbar path=path}}
<div style="padding-top: 56px; padding-bottom: 56px;">
<main class="container my-4">
{{#each errors as |error|}}
<div class="alert alert-danger" role="alert">
{{error}}
<main class="container my-4">
<div class="row justify-content-center">
<div class="col col-lg-10 col-xl-8 col-xxl-8">
{{#each errors as |error|}}
<div class="alert alert-danger" role="alert">
{{error}}
</div>
{{/each}}
{{#each successes as |success|}}
<div class="alert alert-success" role="alert">
{{success}}
</div>
{{/each}}
<ul class="list-group">
{{#each files}}
<li class="list-group-item">
<label for="check{{@index}}" class="stretched-invisible-label">
<div class="form-check">
<input type="checkbox" class="form-check-input multi-select" data-select="{{name}}" data-select-size="{{size}}" data-select-type="{{#if isdirectory}}directory{{else}}file{{/if}}" id="check{{@index}}">
<span class="form-check-label d-flex align-items-start justify-content-between">
{{#if isdirectory}}
<a href="./{{name}}/" class="name">{{name}}/</a>
{{else}}
<a href="./{{name}}" class="name">{{name}}</a>
<span class="badge rounded-pill bg-secondary badge-alignment">{{filesize size}}</span>
{{/if}}
</span>
{{#if isimage}}
<img src="./{{name}}" class="mt-2" style="max-height: 6em; max-width: 100%;">
{{/if}}
</div>
</label>
</li>
{{else}}
<li class="list-group-item">
No files
</li>
{{/each}}
</ul>
</div>
</div>
{{/each}}
{{#each successes as |success|}}
<div class="alert alert-success" role="alert">
{{success}}
</div>
{{/each}}
<ul class="list-group">
{{#each files}}
<li class="list-group-item">
<label for="check{{@index}}" class="stretched-invisible-label">
<div class="form-check">
<input type="checkbox" class="form-check-input multi-select" data-select="{{name}}" data-select-size="{{size}}" data-select-type="{{#if isdirectory}}directory{{else}}file{{/if}}" id="check{{@index}}">
<span class="form-check-label d-flex align-items-start justify-content-between">
{{#if isdirectory}}
<a href="./{{name}}/" class="name">{{name}}/</a>
{{else}}
<a href="./{{name}}" class="name">{{name}}</a>
<span class="badge rounded-pill bg-secondary badge-alignment">{{filesize size}}</span>
{{/if}}
</span>
</div>
</label>
</li>
{{else}}
<li class="list-group-item">
No files
</li>
{{/each}}
</ul>
</main>
</main>
</div>
{{> toolbar shellable=shellable cmdable=cmdable}}

View File

@ -7,14 +7,14 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>You are deleting the following files: </p>
<p>You are deleting the following files or folders: </p>
<ul class="list-group multi-files">
</ul>
<input type="hidden" name="files" value="" class="multi-files-value" />
</div>
<div class="modal-footer bg-light">
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
<button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>

View File

@ -3,7 +3,7 @@
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-light">
<h5 class="modal-title">Download file archive?</h5>
<h5 class="modal-title">Download file archive</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@ -11,7 +11,10 @@
<ul class="list-group multi-files">
</ul>
<p class="mt-3 mb-0">Total size: <span class="multi-files-total">Unknown</span></p>
<div class="mt-3">
<label class="form-label" for="upload-file-size">Total size</label>
<input class="form-control multi-files-total" type="text" disabled placeholder="Unknown" />
</div>
<input type="hidden" name="files" value="" class="multi-files-value" />
</div>
<div class="modal-footer bg-light">

View File

@ -1,7 +1,7 @@
<nav class="navbar navbar-light bg-light fixed-bottom">
<div class="container-fluid px-2">
<div class="d-flex">
<div class="btn-group me-1" role="group">
<div class="btn-group me-2" role="group">
<a class="btn btn-primary" href="@upload" data-bs-toggle="modal" data-bs-target="#upload" data-placement="top" title="Upload">
{{octicon "cloud-upload"}}
<span class="d-none d-sm-inline">Upload</span>
@ -12,7 +12,7 @@
</a>
</div>
{{#either cmdable shellable}}
<div class="btn-group me-1" role="group">
<div class="btn-group me-2" role="group">
{{#if cmdable}}
<a class="btn btn-info" href="@cmd" data-bs-toggle="modal" data-bs-target="#cmd" data-placement="top" title="Run command">
{{octicon "terminal"}}
@ -27,13 +27,13 @@
{{/if}}
</div>
{{/either}}
<div class="btn-group me-1" role="group">
<a class="btn btn-success" href="@download" data-bs-toggle="modal" data-bs-target="#download" data-placement="top" title="Download files as zip">
<div class="btn-group me-2" role="group">
<a class="btn btn-success" href="@download" data-bs-toggle="modal" data-bs-target="#download" data-placement="top" title="Download file archive">
{{octicon "file-zip"}}
<span class="d-none d-md-inline">Download</span>
</a>
</div>
<div class="btn-group me-1" role="group">
<div class="btn-group me-2" role="group">
<a class="btn btn-danger" href="@delete" data-bs-toggle="modal" data-bs-target="#delete" data-placement="top" title="Delete files">
{{octicon "trashcan"}}
<span class="d-none d-md-inline">Delete</span>
@ -41,7 +41,7 @@
</div>
</div>
<div class="d-flex">
<div class="btn-group ml-1" role="group">
<div class="btn-group ms-2" role="group">
<a class="btn btn-warning" href="./" data-placement="top" title="Refresh list">
{{octicon "sync"}}
<span class="d-none d-lg-inline">Refresh</span>