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 hasDirectory = files.reduce((a, f) => a || f.type == "directory", false);
|
||||||
const totalSize = files.map(f => f.size).reduce((a, b) => a + b);
|
const totalSize = files.map(f => f.size).reduce((a, b) => a + b);
|
||||||
if (hasDirectory) {
|
if (hasDirectory) {
|
||||||
$(".multi-files-total").text("Unknown");
|
$(".multi-files-total").val("");
|
||||||
} else {
|
} 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) => {
|
app.get("/*", (req, res) => {
|
||||||
if (res.stats.error) {
|
if (res.stats.error) {
|
||||||
res.render("list", flashify(req, {
|
res.render("list", flashify(req, {
|
||||||
|
@ -525,6 +535,7 @@ app.get("/*", (req, res) => {
|
||||||
resolve({
|
resolve({
|
||||||
name: f,
|
name: f,
|
||||||
isdirectory: stats.isDirectory(),
|
isdirectory: stats.isDirectory(),
|
||||||
|
isimage: isimage(f),
|
||||||
size: stats.size
|
size: stats.size
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,41 +1,48 @@
|
||||||
{{> navbar path=path}}
|
{{> navbar path=path}}
|
||||||
|
|
||||||
<div style="padding-top: 56px; padding-bottom: 56px;">
|
<div style="padding-top: 56px; padding-bottom: 56px;">
|
||||||
<main class="container my-4">
|
<main class="container my-4">
|
||||||
{{#each errors as |error|}}
|
<div class="row justify-content-center">
|
||||||
<div class="alert alert-danger" role="alert">
|
<div class="col col-lg-10 col-xl-8 col-xxl-8">
|
||||||
{{error}}
|
{{#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>
|
</div>
|
||||||
{{/each}}
|
</main>
|
||||||
{{#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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{> toolbar shellable=shellable cmdable=cmdable}}
|
{{> toolbar shellable=shellable cmdable=cmdable}}
|
||||||
|
|
|
@ -7,14 +7,14 @@
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<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 class="list-group multi-files">
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
<input type="hidden" name="files" value="" class="multi-files-value" />
|
<input type="hidden" name="files" value="" class="multi-files-value" />
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer bg-light">
|
<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>
|
<button type="submit" class="btn btn-danger">Delete</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header bg-light">
|
<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>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
@ -11,7 +11,10 @@
|
||||||
<ul class="list-group multi-files">
|
<ul class="list-group multi-files">
|
||||||
|
|
||||||
</ul>
|
</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" />
|
<input type="hidden" name="files" value="" class="multi-files-value" />
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer bg-light">
|
<div class="modal-footer bg-light">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<nav class="navbar navbar-light bg-light fixed-bottom">
|
<nav class="navbar navbar-light bg-light fixed-bottom">
|
||||||
<div class="container-fluid px-2">
|
<div class="container-fluid px-2">
|
||||||
<div class="d-flex">
|
<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">
|
<a class="btn btn-primary" href="@upload" data-bs-toggle="modal" data-bs-target="#upload" data-placement="top" title="Upload">
|
||||||
{{octicon "cloud-upload"}}
|
{{octicon "cloud-upload"}}
|
||||||
<span class="d-none d-sm-inline">Upload</span>
|
<span class="d-none d-sm-inline">Upload</span>
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{{#either cmdable shellable}}
|
{{#either cmdable shellable}}
|
||||||
<div class="btn-group me-1" role="group">
|
<div class="btn-group me-2" role="group">
|
||||||
{{#if cmdable}}
|
{{#if cmdable}}
|
||||||
<a class="btn btn-info" href="@cmd" data-bs-toggle="modal" data-bs-target="#cmd" data-placement="top" title="Run command">
|
<a class="btn btn-info" href="@cmd" data-bs-toggle="modal" data-bs-target="#cmd" data-placement="top" title="Run command">
|
||||||
{{octicon "terminal"}}
|
{{octicon "terminal"}}
|
||||||
|
@ -27,13 +27,13 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{/either}}
|
{{/either}}
|
||||||
<div class="btn-group me-1" role="group">
|
<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 files as zip">
|
<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"}}
|
{{octicon "file-zip"}}
|
||||||
<span class="d-none d-md-inline">Download</span>
|
<span class="d-none d-md-inline">Download</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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">
|
<a class="btn btn-danger" href="@delete" data-bs-toggle="modal" data-bs-target="#delete" data-placement="top" title="Delete files">
|
||||||
{{octicon "trashcan"}}
|
{{octicon "trashcan"}}
|
||||||
<span class="d-none d-md-inline">Delete</span>
|
<span class="d-none d-md-inline">Delete</span>
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex">
|
<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">
|
<a class="btn btn-warning" href="./" data-placement="top" title="Refresh list">
|
||||||
{{octicon "sync"}}
|
{{octicon "sync"}}
|
||||||
<span class="d-none d-lg-inline">Refresh</span>
|
<span class="d-none d-lg-inline">Refresh</span>
|
||||||
|
|
Loading…
Reference in New Issue