@axium/storage 0.6.1 → 0.6.3

package/dist/server.d.ts

@@ -54,6 +54,19 @@ declare module '@axium/server/config' {
         };
     }
 }
+declare module '@axium/server/audit' {
+    interface $EventTypes {
+        storage_type_mismatch: {
+            /** The ID of the target item */
+            item: string;
+        };
+        /** Mismatch between the actual size of an upload and the size reported in the header */
+        storage_size_mismatch: {
+            /** ID of the target item, null for new uploads */
+            item: string | null;
+        };
+    }
+}
 export interface StorageItem extends StorageItemMetadata {
     data: Uint8Array<ArrayBufferLike>;
 }

package/dist/server.js

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 import { Permission } from '@axium/core/access';
+import { addEvent, audit, Severity } from '@axium/server/audit';
 import { checkAuthForItem, checkAuthForUser, getSessionAndUser } from '@axium/server/auth';
 import { addConfigDefaults, config } from '@axium/server/config';
 import { database, expectedTypes } from '@axium/server/database';
@@ -27,6 +27,8 @@ expectedTypes.storage = {
     publicPermission: { type: 'int4', required: true, hasDefault: true },
     metadata: { type: 'jsonb', required: true, hasDefault: true },
 };
+addEvent({ source: '@axium/storage', name: 'storage_type_mismatch', severity: Severity.Warning, tags: ['mimetype'] });
+addEvent({ source: '@axium/storage', name: 'storage_size_mismatch', severity: Severity.Warning, tags: [] });
 const defaultCASMime = [/video\/.*/, /audio\/.*/];
 addConfigDefaults({
     storage: {
@@ -197,9 +199,10 @@ addRoute({
         if (size > limits.item_size * 1_000_000)
             error(413, 'File size exceeds maximum size');
         const content = await event.request.bytes();
-        // @todo: add this to the audit log
-        if (content.byteLength > size)
+        if (content.byteLength > size) {
+            await audit('storage_size_mismatch', userId, { item: null });
             error(400, 'Content length does not match size header');
+        }
         const type = event.request.headers.get('content-type') || 'application/octet-stream';
         const isDirectory = type == 'inode/directory';
         if (isDirectory && size > 0)
@@ -267,7 +270,7 @@ addRoute({
         if (!config.storage.enabled)
             error(503, 'User storage is disabled');
         const itemId = event.params.id;
-        const { item } = await checkAuthForItem(event, 'storage', itemId, Permission.Edit);
+        const { item, session } = await checkAuthForItem(event, 'storage', itemId, Permission.Edit);
         if (item.immutable)
             error(405, 'Item is immutable');
         if (item.type == 'inode/directory')
@@ -275,9 +278,10 @@ addRoute({
         if (item.trashedAt)
             error(410, 'Trashed items can not be changed');
         const type = event.request.headers.get('content-type') || 'application/octet-stream';
-        // @todo: add this to the audit log
-        if (type != item.type)
+        if (type != item.type) {
+            await audit('storage_type_mismatch', session?.userId, { item: item.id });
             error(400, 'Content type does not match existing item type');
+        }
         const size = Number(event.request.headers.get('content-length'));
         if (Number.isNaN(size))
             error(411, 'Missing or invalid content length header');
@@ -287,9 +291,10 @@ addRoute({
         if (size > limits.item_size * 1_000_000)
             error(413, 'File size exceeds maximum size');
         const content = await event.request.bytes();
-        // @todo: add this to the audit log
-        if (content.byteLength > size)
-            error(400, 'Content length does not match size header');
+        if (content.byteLength > size) {
+            await audit('storage_size_mismatch', session?.userId, { item: item.id });
+            error(400, 'Actual content length does not match header');
+        }
         const hash = createHash('BLAKE2b512').update(content).digest();
         const tx = await database.startTransaction().execute();
         try {

package/lib/Add.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { forMime } from '@axium/core/icons';
+	import { FormDialog, Icon, Popover, Upload } from '@axium/server/components';
+	import { uploadItem } from '@axium/storage/client';
+	import type { StorageItemMetadata } from '@axium/storage/common';
+
+	const { parentId, onadd }: { parentId?: string; onadd?(item: StorageItemMetadata): void } = $props();
+
+	let uploadDialog = $state<HTMLDialogElement>()!;
+	let input = $state<HTMLInputElement>();
+
+	let createDialog = $state<HTMLDialogElement>()!;
+	let createType = $state<string>();
+	let createIncludesContent = $state(false);
+</script>
+
+{#snippet _item(type: string, text: string, includeContent: boolean = false)}
+	<span
+		class="icon-text add-menu-item"
+		onclick={() => {
+			createType = type;
+			createIncludesContent = includeContent;
+			createDialog.showModal();
+		}}
+	>
+		<Icon i={forMime(type)} />
+		{text}
+	</span>
+{/snippet}
+
+<Popover>
+	{#snippet toggle()}
+		<button class="icon-text"><Icon i="plus" />Add</button>
+	{/snippet}
+
+	<div class="add-menu">
+		<span class="icon-text add-menu-item" onclick={() => uploadDialog.showModal()}><Icon i="upload" />Upload</span>
+		{@render _item('inode/directory', 'New Folder')}
+		{@render _item('text/plain', 'Plain Text')}
+		{@render _item('text/x-uri', 'URL', true)}
+	</div>
+</Popover>
+
+<FormDialog
+	bind:dialog={uploadDialog}
+	submitText="Upload"
+	submit={async () => {
+		for (const file of input?.files!) {
+			const item = await uploadItem(file, { parentId });
+			onadd?.(item);
+		}
+	}}
+>
+	<Upload bind:input multiple />
+</FormDialog>
+
+<FormDialog
+	bind:dialog={createDialog}
+	submitText="Create"
+	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);
+	}}
+>
+	<div>
+		<label for="name">Name</label>
+		<input name="name" type="text" required />
+	</div>
+	{#if createIncludesContent}
+		<div>
+			<label for="content">Content</label>
+			<input name="content" type="text" size="40" required />
+		</div>
+	{/if}
+</FormDialog>
+
+<style>
+	.add-menu {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.add-menu-item {
+		border-radius: 0.5em;
+		padding: 0.25em 0.25em;
+	}
+
+	.add-menu-item:hover {
+		cursor: pointer;
+		background-color: #4455;
+	}
+</style>

package/lib/List.svelte

@@ -7,7 +7,7 @@
 	import '../styles/list.css';
 
 	let {
-		items = $bindable([]),
+		items = $bindable(),
 		appMode,
 		emptyText = 'Folder is empty.',
 	}: { appMode?: boolean; items: StorageItemMetadata[]; emptyText?: string } = $props();

package/lib/index.ts

@@ -1,3 +1,4 @@
+export { default as StorageAdd } from './Add.svelte';
 export { default as StorageList } from './List.svelte';
 export { default as StorageSidebar } from './Sidebar.svelte';
 export { default as StorageSidebarItem } from './SidebarItem.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/storage",
-	"version": "0.6.1",
+	"version": "0.6.3",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "User file storage for Axium",
 	"funding": {
@@ -40,7 +40,7 @@
 	"peerDependencies": {
 		"@axium/client": ">=0.1.0",
 		"@axium/core": ">=0.5.0",
-		"@axium/server": ">=0.20.2",
+		"@axium/server": ">=0.21.0",
 		"@sveltejs/kit": "^2.27.3",
 		"utilium": "^2.3.8"
 	},

package/routes/files/+layout.svelte

@@ -2,9 +2,8 @@
 	import { Icon } from '@axium/server/components';
 	import { StorageUsage } from '@axium/storage/components';
 	import { capitalize } from 'utilium';
-	import type { LayoutProps } from './$types';
 
-	let { children, data }: LayoutProps = $props();
+	let { children, data } = $props();
 </script>
 
 <div class="app">

package/routes/files/+layout.ts

@@ -15,8 +15,5 @@ export async function load({ url, route }: LayoutLoadEvent) {
 		{ name: 'shared', href: '/files/shared', icon: 'user-group', active: route.id.endsWith('/files/shared') },
 	] satisfies { name: string; href: LayoutRouteId; icon: string; active: boolean }[];
 
-	return {
-		session: await getCurrentSession(),
-		tabs,
-	};
+	return { session, tabs };
 }

package/routes/files/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { StorageList } from '@axium/storage/components';
-	import type { PageProps } from './$types';
+	import { StorageAdd, StorageList } from '@axium/storage/components';
 
-	const { data }: PageProps = $props();
+	const { data } = $props();
+	let items = $state(data.items!);
 </script>
 
 <svelte:head>
 	<title>Files</title>
 </svelte:head>
 
-<StorageList appMode bind:items={data.items} />
+<StorageList appMode bind:items />
+<StorageAdd onadd={item => items.push(item)} />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Icon } from '@axium/server/components';
-	import { StorageList } from '@axium/storage/components';
+	import { StorageAdd, StorageList } from '@axium/storage/components';
 	import type { PageProps } from './$types';
 	import { updateItemMetadata } from '@axium/storage/client';
 
@@ -26,6 +26,7 @@
 	</button>
 {:else if item.type == 'inode/directory'}
 	<StorageList appMode bind:items />
+	<StorageAdd parentId={item.id} onadd={item => items.push(item)} />
 {:else}
 	<p>No preview available.</p>
 {/if}