Improvements to form submissions, show images
parent
36cdb9aa8b
commit
af66932295
|
@ -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));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
11
index.js
11
index.js
|
@ -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
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue