Many changes
This commit is contained in:
@@ -0,0 +1,641 @@
|
||||
<script>
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
let mode = $state("text");
|
||||
let content = $state("");
|
||||
let selectedFile = $state(null);
|
||||
let loading = $state(false);
|
||||
let errorMessage = $state("");
|
||||
|
||||
let maxUploadSizeBytes = $state(0);
|
||||
let uploadAllowed = $state(true);
|
||||
let configError = $state("");
|
||||
|
||||
let routeMode = $state("home");
|
||||
let scratchID = $state("");
|
||||
|
||||
let viewLoading = $state(false);
|
||||
let viewError = $state("");
|
||||
let viewMeta = $state(null);
|
||||
let viewContent = $state("");
|
||||
let viewIsBinary = $state(false);
|
||||
let viewIsImage = $state(false);
|
||||
let refreshTriggered = $state(false);
|
||||
let nowMs = $state(Date.now());
|
||||
|
||||
let nowTicker = null;
|
||||
|
||||
const maxUploadSizeDisplay = $derived(formatBytes(maxUploadSizeBytes, true));
|
||||
|
||||
onMount(async () => {
|
||||
nowTicker = window.setInterval(() => {
|
||||
nowMs = Date.now();
|
||||
}, 1000);
|
||||
|
||||
detectRoute();
|
||||
await loadUIConfig();
|
||||
if (routeMode === "view") {
|
||||
await loadScratchView();
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (nowTicker !== null) {
|
||||
window.clearInterval(nowTicker);
|
||||
nowTicker = null;
|
||||
}
|
||||
});
|
||||
|
||||
function detectRoute() {
|
||||
const path = window.location.pathname;
|
||||
if (path === "/" || path === "") {
|
||||
routeMode = "home";
|
||||
scratchID = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (path === "/u" || path === "/u/") {
|
||||
routeMode = "upload";
|
||||
scratchID = "";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!path.startsWith("/s/")) {
|
||||
routeMode = "notfound";
|
||||
scratchID = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const rawID = path.slice("/s/".length).trim();
|
||||
if (rawID.length === 0) {
|
||||
routeMode = "notfound";
|
||||
scratchID = "";
|
||||
return;
|
||||
}
|
||||
|
||||
routeMode = "view";
|
||||
scratchID = decodeURIComponent(rawID);
|
||||
}
|
||||
|
||||
async function loadUIConfig() {
|
||||
configError = "";
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/config");
|
||||
if (!response.ok) {
|
||||
throw new Error(`failed to load UI config (${response.status})`);
|
||||
}
|
||||
const data = await response.json();
|
||||
const max = Number.parseInt(String(data.max_upload_size_bytes ?? "0"), 10);
|
||||
maxUploadSizeBytes = Number.isFinite(max) ? max : 0;
|
||||
uploadAllowed = Boolean(data.upload_allowed);
|
||||
} catch (err) {
|
||||
configError = err instanceof Error ? err.message : String(err);
|
||||
maxUploadSizeBytes = 0;
|
||||
uploadAllowed = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadScratchView() {
|
||||
if (!scratchID) {
|
||||
viewError = "Scratch id is missing.";
|
||||
return;
|
||||
}
|
||||
|
||||
viewLoading = true;
|
||||
viewError = "";
|
||||
viewMeta = null;
|
||||
viewContent = "";
|
||||
viewIsBinary = false;
|
||||
viewIsImage = false;
|
||||
refreshTriggered = false;
|
||||
|
||||
try {
|
||||
const metaResponse = await fetch(`/api/scratch/${encodeURIComponent(scratchID)}`);
|
||||
if (!metaResponse.ok) {
|
||||
if (metaResponse.status === 404 || metaResponse.status === 410) {
|
||||
routeMode = "expired";
|
||||
viewError = "This scratch is no longer available.";
|
||||
return;
|
||||
}
|
||||
const msg = await metaResponse.text();
|
||||
throw new Error(msg || `failed to load scratch metadata (${metaResponse.status})`);
|
||||
}
|
||||
viewMeta = await metaResponse.json();
|
||||
|
||||
const rawResponse = await fetch(`/api/raw/${encodeURIComponent(scratchID)}`);
|
||||
if (!rawResponse.ok) {
|
||||
const msg = await rawResponse.text();
|
||||
throw new Error(msg || `failed to load scratch content (${rawResponse.status})`);
|
||||
}
|
||||
|
||||
const contentType = rawResponse.headers.get("content-type") ?? "";
|
||||
if (isLikelyTextContentType(contentType)) {
|
||||
viewContent = await rawResponse.text();
|
||||
viewIsBinary = false;
|
||||
viewIsImage = false;
|
||||
} else if (isBrowserImageContentType(contentType)) {
|
||||
viewIsImage = true;
|
||||
viewIsBinary = false;
|
||||
} else {
|
||||
viewIsImage = false;
|
||||
viewIsBinary = true;
|
||||
}
|
||||
} catch (err) {
|
||||
viewError = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
viewLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function trimTrailingZeros(value) {
|
||||
return value.replace(/\.0+$/, "").replace(/(\.\d*[1-9])0+$/, "$1");
|
||||
}
|
||||
|
||||
function formatBytes(bytes, binary) {
|
||||
if (!Number.isFinite(bytes) || bytes <= 0) {
|
||||
return "0 bytes";
|
||||
}
|
||||
|
||||
const base = binary ? 1024 : 1000;
|
||||
const units = binary ? ["KiB", "MiB", "GiB"] : ["KB", "MB", "GB"];
|
||||
if (bytes < base) {
|
||||
return `${bytes} bytes`;
|
||||
}
|
||||
|
||||
let value = bytes;
|
||||
let unitIndex = -1;
|
||||
while (value >= base && unitIndex < units.length - 1) {
|
||||
value /= base;
|
||||
unitIndex += 1;
|
||||
}
|
||||
|
||||
const rounded = value >= 10 ? value.toFixed(1) : value.toFixed(2);
|
||||
return `${trimTrailingZeros(rounded)} ${units[unitIndex]}`;
|
||||
}
|
||||
|
||||
function isLikelyTextContentType(contentType) {
|
||||
const normalized = String(contentType).toLowerCase();
|
||||
if (normalized.startsWith("text/")) {
|
||||
return true;
|
||||
}
|
||||
return (
|
||||
normalized.startsWith("application/json") ||
|
||||
normalized.startsWith("application/xml") ||
|
||||
normalized.startsWith("application/javascript") ||
|
||||
normalized.startsWith("application/x-www-form-urlencoded")
|
||||
);
|
||||
}
|
||||
|
||||
function isBrowserImageContentType(contentType) {
|
||||
return String(contentType).toLowerCase().startsWith("image/");
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (refreshTriggered || routeMode !== "view" || !viewMeta?.expires_at) {
|
||||
return;
|
||||
}
|
||||
|
||||
const expiry = Date.parse(String(viewMeta.expires_at));
|
||||
if (!Number.isFinite(expiry)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (nowMs >= expiry+10_000) {
|
||||
refreshTriggered = true;
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
function expiresInText(expiresAt, now) {
|
||||
const expiry = Date.parse(String(expiresAt ?? ""));
|
||||
if (!Number.isFinite(expiry)) {
|
||||
return "unknown";
|
||||
}
|
||||
const deltaMs = Math.max(0, expiry - now);
|
||||
if (deltaMs === 0) {
|
||||
return "expired";
|
||||
}
|
||||
|
||||
const totalSeconds = Math.floor(deltaMs / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${minutes}m ${seconds}s`;
|
||||
}
|
||||
if (minutes > 0) {
|
||||
return `${minutes}m ${seconds}s`;
|
||||
}
|
||||
return `${seconds}s`;
|
||||
}
|
||||
|
||||
function switchMode(nextMode) {
|
||||
if (loading || nextMode === mode) {
|
||||
return;
|
||||
}
|
||||
mode = nextMode;
|
||||
errorMessage = "";
|
||||
if (mode === "text") {
|
||||
selectedFile = null;
|
||||
} else {
|
||||
content = "";
|
||||
}
|
||||
}
|
||||
|
||||
function onFileChange(event) {
|
||||
selectedFile = event.currentTarget.files?.[0] ?? null;
|
||||
}
|
||||
|
||||
async function onSubmit(event) {
|
||||
event.preventDefault();
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
if (!uploadAllowed) {
|
||||
errorMessage = "Uploads are not available from your network location.";
|
||||
return;
|
||||
}
|
||||
|
||||
errorMessage = "";
|
||||
|
||||
const trimmedContent = content.trim();
|
||||
if (mode === "text") {
|
||||
if (!trimmedContent) {
|
||||
errorMessage = "Enter text content before creating a scratch.";
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!selectedFile) {
|
||||
errorMessage = "Choose a file before creating a scratch.";
|
||||
return;
|
||||
}
|
||||
if (maxUploadSizeBytes > 0 && selectedFile.size > maxUploadSizeBytes) {
|
||||
errorMessage = `Selected file is too large (${formatBytes(selectedFile.size, true)}). Max upload size is ${maxUploadSizeDisplay}.`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let response;
|
||||
if (mode === "file") {
|
||||
const formData = new FormData();
|
||||
formData.append("file", selectedFile);
|
||||
response = await fetch("/api/scratch", {
|
||||
method: "POST",
|
||||
body: formData
|
||||
});
|
||||
} else {
|
||||
response = await fetch("/api/scratch", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "text/plain; charset=utf-8" },
|
||||
body: trimmedContent
|
||||
});
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const message = await response.text();
|
||||
throw new Error(message || `request failed (${response.status})`);
|
||||
}
|
||||
|
||||
const created = await response.json();
|
||||
const viewURL = typeof created?.view_url === "string" ? created.view_url : "";
|
||||
if (!viewURL) {
|
||||
throw new Error("scratch created but view URL is missing");
|
||||
}
|
||||
window.location.assign(viewURL);
|
||||
return;
|
||||
} catch (err) {
|
||||
if (mode === "file" && err instanceof TypeError) {
|
||||
errorMessage = `Upload failed before the server returned a response. Max upload size is ${maxUploadSizeDisplay}.`;
|
||||
} else {
|
||||
errorMessage = err instanceof Error ? err.message : String(err);
|
||||
}
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container">
|
||||
<header class="site-header">
|
||||
<div class="brand-row">
|
||||
<a class="brand" href="/">Scratchbox</a>
|
||||
<span class="tagline">Quick unauthenticated scratch uploads</span>
|
||||
</div>
|
||||
<nav class="site-nav" aria-label="Primary">
|
||||
<a class="link-button nav-button" href="/">Home</a>
|
||||
{#if uploadAllowed}
|
||||
<a class="link-button nav-button" href="/u">Upload</a>
|
||||
{/if}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{#if routeMode === "home"}
|
||||
<section class="panel">
|
||||
<h1>Share scratch files and text quickly</h1>
|
||||
<p>
|
||||
Scratchbox is a minimal temporary upload service. Every upload creates one scratch with an expiration
|
||||
timestamp. It supports plain text and single file uploads, plus direct raw retrieval for automation.
|
||||
</p>
|
||||
<p>
|
||||
No accounts, no sessions, no friction. Create a scratch, grab the URL, and share it.
|
||||
</p>
|
||||
{#if !uploadAllowed}
|
||||
<p class="helper">Uploads are currently unavailable from your network location.</p>
|
||||
{/if}
|
||||
</section>
|
||||
{:else if routeMode === "view"}
|
||||
<section class="panel">
|
||||
{#if viewLoading}
|
||||
<p>Loading scratch...</p>
|
||||
{:else if viewError}
|
||||
<section id="error" class="error">{viewError}</section>
|
||||
{:else if viewMeta}
|
||||
{#if viewIsImage}
|
||||
<img
|
||||
class="scratch-image"
|
||||
src={viewMeta.raw_url}
|
||||
alt={`Scratch ${scratchID}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else if viewIsBinary}
|
||||
<p>This scratch looks binary and is not rendered in-page. Use the raw link.</p>
|
||||
{:else}
|
||||
<pre>{viewContent}</pre>
|
||||
{/if}
|
||||
|
||||
<p><strong>Expires in:</strong> {expiresInText(viewMeta.expires_at, nowMs)}</p>
|
||||
<p><a class="link-button" href={viewMeta.raw_url} target="_blank" rel="noreferrer">Download</a></p>
|
||||
{/if}
|
||||
</section>
|
||||
{:else if routeMode === "upload"}
|
||||
<section class="panel">
|
||||
<h1>Upload</h1>
|
||||
<p>Create an unauthenticated scratch. It expires automatically.</p>
|
||||
<p class="helper">Max upload size: {maxUploadSizeDisplay}</p>
|
||||
{#if configError}
|
||||
<p class="helper warning">Could not load UI config: {configError}</p>
|
||||
{/if}
|
||||
{#if !uploadAllowed}
|
||||
<section id="error" class="error">
|
||||
Uploads are disabled for your current IP based on server allowlist settings.
|
||||
</section>
|
||||
{:else}
|
||||
<form id="scratch-form" onsubmit={onSubmit}>
|
||||
<fieldset class="mode-picker">
|
||||
<legend>Upload mode</legend>
|
||||
<div class="mode-buttons" role="tablist" aria-label="Upload mode">
|
||||
<button
|
||||
id="mode-text"
|
||||
type="button"
|
||||
class:mode-button={true}
|
||||
class:is-active={mode === "text"}
|
||||
aria-pressed={mode === "text"}
|
||||
onclick={() => switchMode("text")}
|
||||
>
|
||||
Text
|
||||
</button>
|
||||
<button
|
||||
id="mode-file"
|
||||
type="button"
|
||||
class:mode-button={true}
|
||||
class:is-active={mode === "file"}
|
||||
aria-pressed={mode === "file"}
|
||||
onclick={() => switchMode("file")}
|
||||
>
|
||||
File
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{#if mode === "text"}
|
||||
<section id="text-panel" class="input-panel">
|
||||
<label for="content">Text content</label>
|
||||
<textarea
|
||||
id="content"
|
||||
name="content"
|
||||
rows="14"
|
||||
placeholder="Paste text here"
|
||||
bind:value={content}
|
||||
disabled={loading}
|
||||
></textarea>
|
||||
</section>
|
||||
{:else}
|
||||
<section id="file-panel" class="input-panel">
|
||||
<label for="file">File upload</label>
|
||||
<input
|
||||
id="file"
|
||||
name="file"
|
||||
type="file"
|
||||
onchange={onFileChange}
|
||||
disabled={loading}
|
||||
/>
|
||||
<p class="helper">Upload one file per scratch.</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{#if loading}Creating...{:else}Create scratch{/if}
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if errorMessage}
|
||||
<section id="error" class="error">{errorMessage}</section>
|
||||
{/if}
|
||||
</section>
|
||||
{:else if routeMode === "expired"}
|
||||
<section class="panel">
|
||||
<h1>Scratch expired</h1>
|
||||
<p>{viewError || "The scratch you requested is no longer available because its retention time elapsed."}</p>
|
||||
</section>
|
||||
{:else}
|
||||
<section class="panel">
|
||||
<h1>Page not found</h1>
|
||||
<p>The requested path does not exist.</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<footer class="site-footer">
|
||||
<p>Scratchbox - simple temporary uploads</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
background: #0b0e14;
|
||||
color: #e7ebf3;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.25rem 3rem;
|
||||
}
|
||||
|
||||
.site-header,
|
||||
.site-footer,
|
||||
.panel {
|
||||
border: 1px solid #2a3243;
|
||||
border-radius: 10px;
|
||||
background: #101726;
|
||||
}
|
||||
|
||||
.site-header,
|
||||
.site-footer {
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.brand-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: #f5f7fc;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #b1b7c7;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 1rem;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 1rem;
|
||||
color: #b1b7c7;
|
||||
}
|
||||
|
||||
.helper {
|
||||
color: #b1b7c7;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border: 1px solid #2f67c8;
|
||||
border-radius: 8px;
|
||||
background: #213f75;
|
||||
color: #f2f5fb;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: #162640;
|
||||
border-color: #355487;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: #f4c16e;
|
||||
}
|
||||
|
||||
.mode-picker,
|
||||
.input-panel,
|
||||
#error {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mode-picker {
|
||||
border: 1px solid #2a3243;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mode-button {
|
||||
border: 1px solid #2a3243;
|
||||
border-radius: 8px;
|
||||
background: #121826;
|
||||
color: #e7ebf3;
|
||||
padding: 0.4rem 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mode-button.is-active {
|
||||
background: #2b4b89;
|
||||
border-color: #4a75c4;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="file"] {
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
background: #121826;
|
||||
color: #e7ebf3;
|
||||
border: 1px solid #2a3243;
|
||||
border-radius: 8px;
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
margin-top: 1rem;
|
||||
border: 1px solid #2f67c8;
|
||||
background: #2b4b89;
|
||||
color: #f2f5fb;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
background: #101726;
|
||||
border: 1px solid #2a3243;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.scratch-image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
border: 1px solid #2a3243;
|
||||
border-radius: 8px;
|
||||
background: #0b0e14;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff9b9b;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user