@axium/storage 0.14.2 → 0.15.1

package/README.md

@@ -1,17 +1,4 @@
 # Axium Storage
 
-This is a plugin for allowing users to store data on an Axium server.
-
-## Usage
-
-Update the configuration to include the files data directory:
-
-```json
-{
-	"storage": {
-		"data": "/path/to/storage/data"
-	}
-}
-```
-
-Also, make sure to run `axium plugin init @axium/storage` to add the necessary database tables for the plugin.
+File storage and management for Axium.
+This plugin provides a competitor to big tech's cloud storage.

package/dist/client/3rd-party.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { StorageItemMetadata } from '../common.js';
+export declare const previews: Map<string, Snippet<[item: StorageItemMetadata<Record<string, unknown>>]>>;
+export interface Opener {
+    /** Mime types supported by this opener */
+    types: string[];
+    name: string;
+    /** Get a URL to open the item with another plugin */
+    openURL(item: StorageItemMetadata): string;
+}
+export declare const openers: Opener[];

package/dist/client/3rd-party.js

@@ -0,0 +1,2 @@
+export const previews = new Map();
+export const openers = [];

package/dist/client/api.d.ts

@@ -1,4 +1,4 @@
-import type { StorageItemMetadata, StorageItemUpdate, UserStorage, UserStorageInfo } from '../common.js';
+import { StorageItemMetadata, type StorageItemUpdate, type UserStorage, type UserStorageInfo } from '../common.js';
 export interface UploadOptions {
     parentId?: string;
     name?: string;

package/dist/client/api.js

@@ -1,4 +1,6 @@
 import { fetchAPI, prefix, token } from '@axium/client/requests';
+import { StorageItemMetadata } from '../common.js';
+import { prettifyError } from 'zod';
 async function _upload(method, url, data, extraHeaders = {}) {
     const init = {
         method,
@@ -20,7 +22,12 @@ async function _upload(method, url, data, extraHeaders = {}) {
     const json = await response.json().catch(() => ({ message: 'Unknown server error (invalid JSON response)' }));
     if (!response.ok)
         throw new Error(json.message);
-    return json;
+    try {
+        return StorageItemMetadata.parse(json);
+    }
+    catch (e) {
+        throw prettifyError(e);
+    }
 }
 function rawStorage(fileId) {
     const raw = '/raw/storage' + (fileId ? '/' + fileId : '');

package/dist/server/raw.js

@@ -1,3 +1,55 @@
+var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
+    if (value !== null && value !== void 0) {
+        if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+        var dispose, inner;
+        if (async) {
+            if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+            dispose = value[Symbol.asyncDispose];
+        }
+        if (dispose === void 0) {
+            if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+            dispose = value[Symbol.dispose];
+            if (async) inner = dispose;
+        }
+        if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
+        env.stack.push({ value: value, dispose: dispose, async: async });
+    }
+    else if (async) {
+        env.stack.push({ async: true });
+    }
+    return value;
+};
+var __disposeResources = (this && this.__disposeResources) || (function (SuppressedError) {
+    return function (env) {
+        function fail(e) {
+            env.error = env.hasError ? new SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+            env.hasError = true;
+        }
+        var r, s = 0;
+        function next() {
+            while (r = env.stack.pop()) {
+                try {
+                    if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+                    if (r.dispose) {
+                        var result = r.dispose.call(r.value);
+                        if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+                    }
+                    else s |= 1;
+                }
+                catch (e) {
+                    fail(e);
+                }
+            }
+            if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
+            if (env.hasError) throw env.error;
+        }
+        return next();
+    };
+})(typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+});
 import { getConfig } from '@axium/core';
 import { audit } from '@axium/server/audit';
 import { checkAuthForItem, requireSession } from '@axium/server/auth';
@@ -5,7 +57,7 @@ import { database } from '@axium/server/database';
 import { error, withError } from '@axium/server/requests';
 import { addRoute } from '@axium/server/routes';
 import { createHash } from 'node:crypto';
-import { linkSync, readFileSync, writeFileSync } from 'node:fs';
+import { closeSync, linkSync, openSync, readSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path/posix';
 import * as z from 'zod';
 import '../polyfills.js';
@@ -95,18 +147,53 @@ addRoute({
     path: '/raw/storage/:id',
     params: { id: z.uuid() },
     async GET(request, { id: itemId }) {
-        if (!getConfig('@axium/storage').enabled)
-            error(503, 'User storage is disabled');
-        const { item } = await checkAuthForItem(request, 'storage', itemId, { read: true });
-        if (item.trashedAt)
-            error(410, 'Trashed items can not be downloaded');
-        const content = new Uint8Array(readFileSync(join(getConfig('@axium/storage').data, item.id)));
-        return new Response(content, {
-            headers: {
-                'Content-Type': item.type,
-                'Content-Disposition': `attachment; filename="${item.name}"`,
-            },
-        });
+        const env_1 = { stack: [], error: void 0, hasError: false };
+        try {
+            if (!getConfig('@axium/storage').enabled)
+                error(503, 'User storage is disabled');
+            const { item } = await checkAuthForItem(request, 'storage', itemId, { read: true });
+            if (item.trashedAt)
+                error(410, 'Trashed items can not be downloaded');
+            const path = join(getConfig('@axium/storage').data, item.id);
+            const range = request.headers.get('range');
+            const fd = openSync(path, 'r');
+            const _ = __addDisposableResource(env_1, { [Symbol.dispose]: () => closeSync(fd) }, false);
+            let start = 0, end = item.size - 1, length = item.size;
+            if (range) {
+                const [_start, _end = item.size - 1] = range
+                    .replace(/bytes=/, '')
+                    .split('-')
+                    .map(val => (val && Number.isSafeInteger(parseInt(val)) ? parseInt(val) : undefined));
+                start = typeof _start == 'number' ? _start : item.size - _end;
+                end = typeof _start == 'number' ? _end : item.size - 1;
+                length = end - start + 1;
+            }
+            if (start >= item.size || end >= item.size || start > end || start < 0) {
+                return new Response(null, {
+                    status: 416,
+                    headers: { 'Content-Range': `bytes */${item.size}` },
+                });
+            }
+            const content = new Uint8Array(length);
+            readSync(fd, content, 0, length, start);
+            return new Response(content, {
+                status: length == item.size ? 200 : 206,
+                headers: {
+                    'Content-Range': `bytes ${start}-${end}/${item.size}`,
+                    'Accept-Ranges': 'bytes',
+                    'Content-Length': String(length),
+                    'Content-Type': item.type,
+                    'Content-Disposition': `attachment; filename="${item.name}"`,
+                },
+            });
+        }
+        catch (e_1) {
+            env_1.error = e_1;
+            env_1.hasError = true;
+        }
+        finally {
+            __disposeResources(env_1);
+        }
     },
     async POST(request, { id: itemId }) {
         if (!getConfig('@axium/storage').enabled)

package/lib/Add.svelte

@@ -4,7 +4,7 @@
 	import { uploadItem } from '@axium/storage/client';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 
-	const { parentId, onadd }: { parentId?: string; onadd?(item: StorageItemMetadata): void } = $props();
+	const { parentId, onAdd }: { parentId?: string; onAdd?(item: StorageItemMetadata): void } = $props();
 
 	let uploadDialog = $state<HTMLDialogElement>()!;
 	let input = $state<HTMLInputElement>();
@@ -45,7 +45,7 @@
 	submit={async () => {
 		for (const file of input?.files!) {
 			const item = await uploadItem(file, { parentId });
-			onadd?.(item);
+			onAdd?.(item);
 		}
 	}}
 >
@@ -58,7 +58,7 @@
 	submit={async (data: { name: string; content?: string }) => {
 		const file = new File(createIncludesContent ? [data.content!] : [], data.name, { type: createType });
 		const item = await uploadItem(file, { parentId });
-		onadd?.(item);
+		onAdd?.(item);
 	}}
 >
 	<div>

package/lib/List.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { AccessControlDialog, FormDialog, Icon } from '@axium/client/components';
+	import { AccessControlDialog, FormDialog, Icon, Popover } from '@axium/client/components';
 	import '@axium/client/styles/list';
 	import type { AccessControllable, UserPublic } from '@axium/core';
 	import { formatBytes } from '@axium/core/format';
 	import { forMime as iconForMime } from '@axium/core/icons';
-	import { getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { downloadItem, getDirectoryMetadata, updateItemMetadata } from '@axium/storage/client';
+	import { openers, previews } from '@axium/storage/client/3rd-party';
 	import type { StorageItemMetadata } from '@axium/storage/common';
 
 	let {
@@ -19,15 +20,15 @@
 	const dialogs = $state<Record<string, HTMLDialogElement>>({});
 </script>
 
-{#snippet action(name: string, icon: string, i: number)}
+{#snippet action(name: string, icon: string, i: number, preview: boolean = false)}
 	<span
-		class="action"
+		class={['icon-text', !preview ? 'action' : 'preview-action']}
 		onclick={() => {
 			activeIndex = i;
 			dialogs[name].showModal();
 		}}
 	>
-		<Icon i={icon} --size="14px" />
+		<Icon i={icon} --size={preview ? '18px' : '14px'} />
 	</span>
 {/snippet}
 
@@ -47,11 +48,12 @@
 		<span>Size</span>
 	</div>
 	{#each items as item, i (item.id)}
+		{@const itemOpeners = openers.filter(opener => opener.types.includes(item.type))}
 		<div
 			class="list-item"
 			onclick={async () => {
 				if (item.type != 'inode/directory') {
-					// @todo get preview
+					dialogs['preview:' + item.id].showModal();
 				} else if (appMode) location.href = '/files/' + item.id;
 				else items = await getDirectoryMetadata(item.id);
 			}}
@@ -70,7 +72,7 @@
 				{@render action('rename', 'pencil', i)}
 				{@render action('share' + item.id, 'user-group', i)}
 				<AccessControlDialog
-					bind:dialog={dialogs['share' + item.id]}
+					bind:dialog={dialogs['share:' + item.id]}
 					{item}
 					itemType="storage"
 					editable={(item.acl?.find(
@@ -83,6 +85,62 @@
 				/>
 				{@render action('download', 'download', i)}
 				{@render action('trash', 'trash', i)}
+				<dialog bind:this={dialogs['preview:' + item.id]} class="preview">
+					<div class="preview-top-bar">
+						<div class="title">{item.name}</div>
+						{#if itemOpeners.length}
+							{@const [first, ...others] = itemOpeners}
+							<div class="openers">
+								<span>Open with <a href={first.openURL(item)} target="_blank">{first.name}</a></span>
+								{#if others.length}
+									<Popover>
+										{#snippet toggle()}
+											<span class="popover-toggle"><Icon i="caret-down" /></span>
+										{/snippet}
+										{#each others as opener}
+											<a href={opener.openURL(item)} target="_blank">{opener.name}</a>
+										{/each}
+									</Popover>
+								{/if}
+							</div>
+						{/if}
+						<div class="actions">
+							{@render action('rename', 'pencil', i, true)}
+							{@render action('share:' + item.id, 'user-group', i, true)}
+							{@render action('download', 'download', i, true)}
+							{@render action('trash', 'trash', i, true)}
+							<span class="mobile-hide" onclick={() => dialogs['preview:' + item.id].close()}>
+								<Icon i="xmark" --size="20px" />
+							</span>
+						</div>
+					</div>
+					<div class="content">
+						{#if item.type.startsWith('image/')}
+							<img src={item.dataURL} alt={item.name} width="100%" />
+						{:else if item.type.startsWith('audio/')}
+							<audio src={item.dataURL} controls></audio>
+						{:else if item.type.startsWith('video/')}
+							<video src={item.dataURL} controls width="100%">
+								<track kind="captions" />
+							</video>
+						{:else if item.type == 'application/pdf'}
+							<object data={item.dataURL} type="application/pdf" width="100%" height="100%">
+								<embed src={item.dataURL} type="application/pdf" width="100%" height="100%" />
+								<p>PDF not displayed? <a href={item.dataURL} download={item.name}>Download</a></p>
+							</object>
+						{:else if item.type.startsWith('text/')}
+							<pre
+								class="full-fill preview-text">{#await downloadItem(item.id).then( b => b.text() ) then content}{content}{/await}</pre>
+						{:else if previews.has(item.type)}
+							{@render previews.get(item.type)!(item)}
+						{:else}
+							<div class="full-fill no-preview">
+								<Icon i="eye-slash" --size="50px" />
+								<span>Preview not available</span>
+							</div>
+						{/if}
+					</div>
+				</dialog>
 			</div>
 		</div>
 	{:else}
@@ -121,19 +179,120 @@
 	submitText="Download"
 	submit={async () => {
 		if (activeItem!.type == 'inode/directory') {
+			/** @todo ZIP support */
 			const children = await getDirectoryMetadata(activeItem!.id);
 			for (const child of children) open(child.dataURL, '_blank');
 		} else open(activeItem!.dataURL, '_blank');
 	}}
 >
-	<p>
-		We are not responsible for the contents of this {activeItem?.type == 'inode/directory' ? 'folder' : 'file'}. <br />
-		Are you sure you want to download {@render _itemName()}?
-	</p>
+	<p>Are you sure you want to download {@render _itemName()}?</p>
 </FormDialog>
 
 <style>
 	.list-item {
 		grid-template-columns: 1em 4fr 15em 5em repeat(4, 1em);
 	}
+
+	dialog.preview {
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #000a;
+		border: none;
+		padding: 1em;
+		word-wrap: normal;
+		anchor-scope: --preview-openers;
+
+		.preview-action:hover {
+			cursor: pointer;
+		}
+
+		.preview-top-bar {
+			display: flex;
+			align-items: center;
+			gap: 1em;
+			justify-content: space-between;
+			padding: 0;
+			position: absolute;
+			inset: 0.5em 1em 0;
+			height: fit-content;
+
+			> div {
+				display: flex;
+				gap: 1em;
+				align-items: center;
+			}
+		}
+
+		.openers {
+			padding: 1em;
+			border: 1px solid var(--border-accent);
+			border-radius: 1em;
+			height: 2em;
+			anchor-name: --preview-openers;
+		}
+
+		.openers :global([popover]) {
+			inset: anchor(bottom) anchor(right) auto anchor(left);
+			position-anchor: --preview-openers;
+			width: anchor-size(width);
+		}
+
+		.actions {
+			right: 0;
+		}
+
+		.content {
+			position: absolute;
+			inset: 3em 10em 0;
+
+			.full-fill {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+			}
+
+			.preview-text {
+				white-space: pre-wrap;
+				overflow-y: scroll;
+				line-height: 1.6;
+				background-color: var(--bg-menu);
+				font-family: monospace;
+			}
+		}
+
+		.no-preview {
+			display: flex;
+			flex-direction: column;
+			gap: 1em;
+			align-items: center;
+			justify-content: center;
+		}
+
+		@media (width < 700px) {
+			.preview-top-bar {
+				flex-direction: column;
+
+				.actions {
+					justify-content: space-around;
+					width: 100%;
+
+					.preview-action {
+						padding: 1em;
+						flex: 1 1 0;
+						border-radius: 1em;
+						border: 1px solid var(--border-accent);
+						padding: 1em;
+						justify-content: center;
+						display: flex;
+					}
+				}
+			}
+
+			.content {
+				inset: 10em 1em 0;
+			}
+		}
+	}
 </style>

package/lib/Usage.svelte

@@ -16,9 +16,9 @@
 				<NumberBar
 					max={info.limits.user_size && info.limits.user_size * 1_000_000}
 					value={info.usedBytes}
-					text="Using {formatBytes(info.usedBytes)} {!info.limits.user_size
+					text="{formatBytes(info.usedBytes)} {!info.limits.user_size
 						? ''
-						: 'of ' + formatBytes(info.limits.user_size * 1_000_000)}"
+						: '/ ' + formatBytes(info.limits.user_size * 1_000_000)}"
 				/>
 			</a>
 		</p>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.14.2",
+	"version": "0.15.1",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "User file storage for Axium",
 	"funding": {

package/routes/files/+page.svelte

@@ -10,4 +10,4 @@
 </svelte:head>
 
 <StorageList appMode bind:items user={data.session?.user} />
-<StorageAdd onadd={item => items.push(item)} />
+<StorageAdd onAdd={item => items.push(item)} />

package/routes/files/[id]/+page.svelte

@@ -35,7 +35,7 @@
 		<Icon i="folder-arrow-up" /> Back
 	</button>
 	<StorageList appMode bind:items user={data.session?.user} />
-	<StorageAdd parentId={item.id} onadd={item => items.push(item)} />
+	<StorageAdd parentId={item.id} onAdd={item => items.push(item)} />
 {:else}
 	<p>No preview available.</p>
 {/if}