implement media attachments

src/components/BskyPost.svelte

···
 		rounded-sm pr-1 transition-colors duration-100 ease-in-out hover:bg-white/10
 		"
 		style="color: {color};"
-		onclick={() => router.navigate(`/profile/${did}`)}
+		onclick={() => ((profileOpen = false), router.navigate(`/profile/${did}`))}
 	>
 		<ProfilePicture {client} {did} size={8} />
 

src/components/EmbedMedia.svelte

···
 				height: (i.aspectRatio?.height ?? 3) * sizeFactor
 			};
 			const cid = i.image.ref.$link;
-			const isPreview = cid.startsWith('blob:');
 			return {
 				...size,
-				src: isPreview ? cid : img('feed_fullsize', did, cid),
+				src: img('feed_fullsize', did, cid),
 				thumbnail: {
-					src: isPreview ? cid : img('feed_thumbnail', did, cid),
+					src: img('feed_thumbnail', did, cid),
 					...size
 				}
 			};
 		})}
-		<PhotoSwipeGallery {images} />
+		{#if images.length > 0}
+			<PhotoSwipeGallery {images} />
+		{/if}
 	{:else if embed.$type === 'app.bsky.embed.video'}
 		{#if isBlob(embed.video)}
-			{@const cid = embed.video.ref.$link}
-			{@const isPreview = cid.startsWith('blob:')}
-			{#if isPreview}
-				<!-- svelte-ignore a11y_media_has_caption -->
-				<video class="rounded-sm" src={cid} controls></video>
-			{:else}
-				{#await resolveDidDoc(did) then didDoc}
-					{#if didDoc.ok}
-						<!-- svelte-ignore a11y_media_has_caption -->
-						<video class="rounded-sm" src={blob(didDoc.value.pds, did, cid)} controls></video>
-					{/if}
-				{/await}
-			{/if}
+			{#await resolveDidDoc(did) then didDoc}
+				{#if didDoc.ok}
+					<!-- svelte-ignore a11y_media_has_caption -->
+					<video
+						class="rounded-sm"
+						src={blob(didDoc.value.pds, did, embed.video.ref.$link)}
+						controls
+					></video>
+				{/if}
+			{/await}
 		{/if}
 	{/if}
 </div>

src/components/PostComposer.svelte

···
 	import Icon from '@iconify/svelte';
 	import ProfilePicture from './ProfilePicture.svelte';
 	import type { AppBskyEmbedMedia } from '$lib/at/types';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { handles } from '$lib/state.svelte';
 
+	type UploadState =
+		| { state: 'uploading'; progress: number }
+		| { state: 'uploaded'; blob: AtpBlob<string> }
+		| { state: 'error'; message: string };
 	export type FocusState = 'null' | 'focused';
 	export type State = {
 		focus: FocusState;
···
 		quoting?: PostWithUri;
 		replying?: PostWithUri;
 		attachedMedia?: AppBskyEmbedMedia;
+		blobsState: SvelteMap<string, UploadState>;
 	};
 
 	interface Props {
···
 		_state: State;
 	}
 
-	let { client, onPostSent, _state = $bindable({ focus: 'null', text: '' }) }: Props = $props();
+	let { client, onPostSent, _state = $bindable() }: Props = $props();
 
 	const isFocused = $derived(_state.focus === 'focused');
 
···
 		client.user?.did ? generateColorForDid(client.user?.did) : 'var(--nucleus-accent2)'
 	);
 
+	const uploadVideo = async (blobUrl: string, mimeType: string) => {
+		const blob = await (await fetch(blobUrl)).blob();
+		return await client.uploadVideo(blob, mimeType, (status) => {
+			if (status.stage === 'uploading' && status.progress !== undefined) {
+				_state.blobsState.set(blobUrl, { state: 'uploading', progress: status.progress * 0.5 });
+			} else if (status.stage === 'processing' && status.progress !== undefined) {
+				_state.blobsState.set(blobUrl, {
+					state: 'uploading',
+					progress: 0.5 + status.progress * 0.5
+				});
+			}
+		});
+	};
+	const uploadImage = async (blobUrl: string) => {
+		const blob = await (await fetch(blobUrl)).blob();
+		return await client.uploadBlob(blob, (progress) => {
+			_state.blobsState.set(blobUrl, { state: 'uploading', progress });
+		});
+	};
+
 	const post = async (text: string): Promise<Result<PostWithUri, string>> => {
 		const strongRef = (p: PostWithUri): ComAtprotoRepoStrongRef.Main => ({
 			$type: 'com.atproto.repo.strongRef',
···
 			const images = _state.attachedMedia.images;
 			let uploadedImages: typeof images = [];
 			for (const image of images) {
-				const blobUrl = (image.image as AtpBlob<string>).ref.$link;
-				const blob = await (await fetch(blobUrl)).blob();
-				const result = await client.uploadBlob(blob);
-				if (!result.ok) return result;
+				const upload = _state.blobsState.get((image.image as AtpBlob<string>).ref.$link);
+				if (!upload || upload.state !== 'uploaded') continue;
 				uploadedImages.push({
 					...image,
-					image: result.value
+					image: upload.blob
 				});
 			}
-			media = {
-				..._state.attachedMedia,
-				$type: 'app.bsky.embed.images',
-				images: uploadedImages
-			};
+			if (uploadedImages.length > 0)
+				media = {
+					..._state.attachedMedia,
+					$type: 'app.bsky.embed.images',
+					images: uploadedImages
+				};
 		} else if (_state.attachedMedia?.$type === 'app.bsky.embed.video') {
-			const blobUrl = (_state.attachedMedia.video as AtpBlob<string>).ref.$link;
-			const blob = await (await fetch(blobUrl)).blob();
-			const result = await client.uploadVideo(blob);
-			if (!result.ok) return result;
-			media = {
-				..._state.attachedMedia,
-				$type: 'app.bsky.embed.video',
-				video: result.value
-			};
+			const upload = _state.blobsState.get(
+				(_state.attachedMedia.video as AtpBlob<string>).ref.$link
+			);
+			if (upload && upload.state === 'uploaded')
+				media = {
+					..._state.attachedMedia,
+					$type: 'app.bsky.embed.video',
+					video: upload.blob
+				};
 		}
+		console.log('media', media);
 
 		const record: AppBskyFeedPost.Main = {
 			$type: 'app.bsky.feed.post',
···
 		});
 	};
 
-	let info = $state('');
+	let posting = $state(false);
+	let postError = $state('');
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
+	let fileInputEl: HTMLInputElement | undefined = $state();
+	let selectingFile = $state(false);
 
 	const unfocus = () => (_state.focus = 'null');
 
+	const handleFileSelect = (event: Event) => {
+		selectingFile = false;
+
+		const input = event.target as HTMLInputElement;
+		const files = input.files;
+		if (!files || files.length === 0) return;
+
+		const existingImages =
+			_state.attachedMedia?.$type === 'app.bsky.embed.images' ? _state.attachedMedia.images : [];
+
+		let newImages = [...existingImages];
+		let hasVideo = false;
+
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
+			const isVideo = file.type.startsWith('video/');
+			const isImage = file.type.startsWith('image/');
+
+			if (!isVideo && !isImage) {
+				postError = 'unsupported file type';
+				continue;
+			}
+
+			if (isVideo) {
+				if (existingImages.length > 0 || newImages.length > 0) {
+					postError = 'cannot mix images and video';
+					continue;
+				}
+				const blobUrl = URL.createObjectURL(file);
+				_state.attachedMedia = {
+					$type: 'app.bsky.embed.video',
+					video: {
+						$type: 'blob',
+						ref: { $link: blobUrl },
+						mimeType: file.type,
+						size: file.size
+					}
+				};
+				hasVideo = true;
+				break;
+			} else if (isImage) {
+				if (newImages.length >= 4) {
+					postError = 'max 4 images allowed';
+					break;
+				}
+				const blobUrl = URL.createObjectURL(file);
+				newImages.push({
+					image: {
+						$type: 'blob',
+						ref: { $link: blobUrl },
+						mimeType: file.type,
+						size: file.size
+					},
+					alt: '',
+					aspectRatio: undefined
+				});
+			}
+		}
+
+		if (!hasVideo && newImages.length > 0) {
+			_state.attachedMedia = {
+				$type: 'app.bsky.embed.images',
+				images: newImages
+			};
+		}
+
+		const handleUpload = (blobUrl: string, blob: Result<AtpBlob<string>, string>) => {
+			if (blob.ok) _state.blobsState.set(blobUrl, { state: 'uploaded', blob: blob.value });
+			else _state.blobsState.set(blobUrl, { state: 'error', message: blob.error });
+		};
+
+		const media = _state.attachedMedia;
+		if (media?.$type == 'app.bsky.embed.images') {
+			for (const image of media.images) {
+				const blobUrl = (image.image as AtpBlob<string>).ref.$link;
+				uploadImage(blobUrl).then((r) => handleUpload(blobUrl, r));
+			}
+		} else if (media?.$type === 'app.bsky.embed.video') {
+			const blobUrl = (media.video as AtpBlob<string>).ref.$link;
+			uploadVideo(blobUrl, media.video.mimeType).then((r) => handleUpload(blobUrl, r));
+		}
+
+		input.value = '';
+	};
+
+	const removeMedia = () => {
+		if (_state.attachedMedia?.$type === 'app.bsky.embed.video') {
+			const blobUrl = (_state.attachedMedia.video as AtpBlob<string>).ref.$link;
+			_state.blobsState.delete(blobUrl);
+		}
+		_state.attachedMedia = undefined;
+	};
+
+	const removeMediaAtIndex = (index: number) => {
+		if (_state.attachedMedia?.$type !== 'app.bsky.embed.images') return;
+		const imageToRemove = _state.attachedMedia.images[index];
+		const blobUrl = (imageToRemove.image as AtpBlob<string>).ref.$link;
+		_state.blobsState.delete(blobUrl);
+
+		const images = _state.attachedMedia.images.filter((_, i) => i !== index);
+		_state.attachedMedia = images.length > 0 ? { ..._state.attachedMedia, images } : undefined;
+	};
+
 	const doPost = () => {
 		if (_state.text.length === 0 || _state.text.length > 300) return;
 
-		post(_state.text).then((res) => {
-			if (res.ok) {
-				onPostSent(res.value);
-				_state.text = '';
-				info = 'posted!';
-				unfocus();
-				setTimeout(() => (info = ''), 800);
-			} else {
-				info = res.error;
-				setTimeout(() => (info = ''), 3000);
-			}
-		});
+		postError = '';
+		posting = true;
+		post(_state.text)
+			.then((res) => {
+				if (res.ok) {
+					onPostSent(res.value);
+					_state.text = '';
+					_state.attachedMedia = undefined;
+					_state.blobsState.clear();
+					unfocus();
+				} else {
+					postError = res.error;
+				}
+			})
+			.finally(() => {
+				posting = false;
+			});
 	};
 
 	$effect(() => {
-		if (!client.atcute) info = 'not logged in';
 		document.documentElement.style.setProperty('--acc-color', color);
 		if (isFocused && textareaEl) textareaEl.focus();
 	});
···
 {#snippet attachmentIndicator(post: PostWithUri, type: 'quoting' | 'replying')}
 	{@const parsedUri = expect(parseCanonicalResourceUri(post.uri))}
 	{@const color = generateColorForDid(parsedUri.repo)}
+	{@const id = handles.get(parsedUri.repo) ?? parsedUri.repo}
 	<div
 		class="flex shrink-0 items-center gap-1.5 rounded-sm border py-0.5 pr-0.5 pl-1 text-xs font-bold transition-all"
 		style="
···
 			border-color: {color};
 			color: {color};
 		"
-		title={type === 'replying' ? `replying to @${parsedUri.repo}` : `quoting @${parsedUri.repo}`}
+		title={type === 'replying' ? `replying to ${id}` : `quoting ${id}`}
 	>
 		<span class="truncate text-sm font-normal opacity-90">
 			{type === 'replying' ? 'replying to' : 'quoting'}
···
 	{/if}
 {/snippet}
 
+{#snippet uploadControls(blobUrl: string, remove: () => void)}
+	{@const upload = _state.blobsState.get(blobUrl)}
+	{#if upload !== undefined && upload.state === 'uploading'}
+		<div
+			class="absolute top-2 right-2 z-10 flex items-center gap-2 rounded-sm bg-black/70 p-1.5 text-sm backdrop-blur-sm"
+		>
+			<div class="flex justify-center">
+				<div
+					class="h-5 w-5 animate-spin rounded-full border-4 border-t-transparent"
+					style="border-color: var(--nucleus-accent) var(--nucleus-accent) var(--nucleus-accent) transparent;"
+				></div>
+			</div>
+			<span class="font-medium">{Math.round(upload.progress * 100)}%</span>
+		</div>
+	{:else}
+		<div class="absolute top-2 right-2 z-10 flex items-center gap-1">
+			{#if upload !== undefined && upload.state === 'error'}
+				<span
+					class="rounded-sm bg-black/70 p-1.5 px-1 text-sm font-bold text-red-500 backdrop-blur-sm"
+					>{upload.message}</span
+				>
+			{/if}
+			<button
+				onclick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					remove();
+				}}
+				onmousedown={(e) => e.preventDefault()}
+				class="rounded-sm bg-black/70 p-1.5 backdrop-blur-sm {upload?.state !== 'error'
+					? 'opacity-0 transition-opacity group-hover:opacity-100'
+					: ''}"
+			>
+				{#if upload?.state === 'error'}
+					<Icon
+						class="text-red-500 group-hover:hidden"
+						icon="heroicons:exclamation-circle-16-solid"
+						width={20}
+					/>
+				{/if}
+				<Icon
+					class={upload?.state === 'error' ? 'hidden group-hover:block' : ''}
+					icon="heroicons:x-mark-16-solid"
+					width={20}
+				/>
+			</button>
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet mediaPreview(embed: AppBskyEmbedMedia)}
+	{#if embed.$type === 'app.bsky.embed.images'}
+		<div class="image-preview-grid" data-total={embed.images.length}>
+			{#each embed.images as image, idx (idx)}
+				{@const blobUrl = (image.image as AtpBlob<string>).ref.$link}
+				<div class="image-preview-item group">
+					<img src={blobUrl} alt="" />
+					{@render uploadControls(blobUrl, () => removeMediaAtIndex(idx))}
+				</div>
+			{/each}
+		</div>
+	{:else if embed.$type === 'app.bsky.embed.video'}
+		{@const blobUrl = (embed.video as AtpBlob<string>).ref.$link}
+		<div
+			class="group relative max-h-[30vh] overflow-hidden rounded-sm"
+			style="aspect-ratio: 16/10;"
+		>
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video src={blobUrl} controls class="h-full w-full"></video>
+			{@render uploadControls(blobUrl, removeMedia)}
+		</div>
+	{/if}
+{/snippet}
+
 {#snippet composer(replying?: PostWithUri, quoting?: PostWithUri)}
+	{@const hasIncompleteUpload = _state.blobsState
+		.values()
+		.some((s) => s.state === 'uploading' || s.state === 'error')}
 	<div class="flex items-center gap-2">
+		<input
+			bind:this={fileInputEl}
+			type="file"
+			accept="image/*,video/*"
+			multiple
+			onchange={handleFileSelect}
+			oncancel={() => (selectingFile = false)}
+			class="hidden"
+		/>
+		<button
+			onclick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				selectingFile = true;
+				fileInputEl?.click();
+			}}
+			onmousedown={(e) => e.preventDefault()}
+			disabled={_state.attachedMedia?.$type === 'app.bsky.embed.video' ||
+				(_state.attachedMedia?.$type === 'app.bsky.embed.images' &&
+					_state.attachedMedia.images.length >= 4)}
+			class="rounded-sm p-1.5 transition-all duration-150 enabled:hover:scale-110 disabled:cursor-not-allowed disabled:opacity-50"
+			style="background: color-mix(in srgb, {color} 15%, transparent); color: {color};"
+			title="attach media"
+		>
+			<Icon icon="heroicons:photo-16-solid" width={20} />
+		</button>
+		{#if postError.length > 0}
+			<div class="group flex items-center gap-2 truncate rounded-sm bg-red-500 p-1.5">
+				<button onclick={() => (postError = '')}>
+					<Icon
+						class="group-hover:hidden"
+						icon="heroicons:exclamation-circle-16-solid"
+						width={20}
+					/>
+					<Icon class="hidden group-hover:block" icon="heroicons:x-mark-16-solid" width={20} />
+				</button>
+				<span title={postError} class="truncate text-sm font-bold">{postError}</span>
+			</div>
+		{/if}
 		<div class="grow"></div>
+		{#if posting}
+			<div
+				class="h-6 w-6 animate-spin rounded-full border-4 border-t-transparent"
+				style="border-color: var(--nucleus-accent) var(--nucleus-accent) var(--nucleus-accent) transparent;"
+			></div>
+		{/if}
 		<span
-			class="text-sm font-medium"
+			class="text-sm font-medium text-nowrap"
 			style="color: color-mix(in srgb, {_state.text.length > 300
 				? '#ef4444'
 				: 'var(--nucleus-fg)'} 53%, transparent);"
···
 			{_state.text.length} / 300
 		</span>
 		<button
+			onmousedown={(e) => e.preventDefault()}
 			onclick={doPost}
-			disabled={_state.text.length === 0 || _state.text.length > 300}
-			class="action-button border-none px-5 text-(--nucleus-fg)/94 disabled:cursor-not-allowed! disabled:opacity-50 disabled:hover:scale-100"
+			disabled={(!_state.attachedMedia && _state.text.length === 0) ||
+				_state.text.length > 300 ||
+				hasIncompleteUpload}
+			class="action-button border-none px-4 py-1.5 text-(--nucleus-fg)/94 disabled:cursor-not-allowed! disabled:opacity-50 disabled:hover:scale-100"
 			style="background: color-mix(in srgb, {color} 87%, transparent);"
 		>
 			post
···
 				bind:this={textareaEl}
 				bind:value={_state.text}
 				onfocus={() => (_state.focus = 'focused')}
-				onblur={unfocus}
+				onblur={() => (!selectingFile ? unfocus() : null)}
 				onkeydown={(event) => {
 					if (event.key === 'Escape') unfocus();
 					if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) doPost();
···
 				class="col-start-1 row-start-1 field-sizing-content min-h-[5lh] w-full resize-none overflow-hidden bg-transparent text-wrap break-all whitespace-pre-wrap text-transparent caret-(--nucleus-fg) placeholder:text-(--nucleus-fg)/45"
 			></textarea>
 		</div>
+		{#if _state.attachedMedia}
+			{@render mediaPreview(_state.attachedMedia)}
+		{/if}
 		{#if quoting}
 			{@render attachedPost(quoting, 'quoting')}
 		{/if}
···
 			border-color: color-mix(in srgb, {color} {isFocused ? '100' : '40'}%, transparent);"
 	>
 		<div class="w-full p-1 px-2">
-			{#if info.length > 0}
+			{#if !client.atcute}
 				<div
 					class="rounded-sm px-3 py-1.5 text-center font-medium text-nowrap overflow-ellipsis"
 					style="background: color-mix(in srgb, {color} 13%, transparent); color: {color};"
 				>
-					{info}
+					not logged in
 				</div>
 			{:else}
-				<div class="flex flex-col gap-2">
+				<div class="flex flex-col gap-1">
 					{#if _state.focus === 'focused'}
 						{@render composer(_state.replying, _state.quoting)}
 					{:else}
···
 
 	textarea:focus {
 		@apply border-none! [box-shadow:none]! outline-none!;
+	}
+
+	/* Image preview grid - based on PhotoSwipeGallery */
+	.image-preview-grid {
+		display: grid;
+		gap: 2px;
+		border-radius: 4px;
+		overflow: hidden;
+		width: 100%;
+		max-height: 30vh;
+	}
+
+	.image-preview-item {
+		width: 100%;
+		height: 100%;
+		display: block;
+		position: relative;
+		overflow: hidden;
+		border-radius: 4px;
+	}
+
+	.image-preview-item > img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	/* Single image: natural aspect ratio */
+	.image-preview-grid[data-total='1'] {
+		display: block;
+		height: auto;
+		width: 100%;
+		border-radius: 0;
+	}
+
+	.image-preview-grid[data-total='1'] .image-preview-item {
+		width: 100%;
+		height: auto;
+		display: block;
+		border-radius: 4px;
+	}
+
+	.image-preview-grid[data-total='1'] .image-preview-item > img {
+		width: 100%;
+		height: auto;
+		max-height: 60vh;
+		object-fit: contain;
+	}
+
+	/* 2 Images: Split vertically */
+	.image-preview-grid[data-total='2'] {
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr;
+		aspect-ratio: 16/9;
+	}
+
+	/* 3 Images: 1 Big (left), 2 Small (stacked right) */
+	.image-preview-grid[data-total='3'] {
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		aspect-ratio: 16/9;
+	}
+	.image-preview-grid[data-total='3'] .image-preview-item:first-child {
+		grid-row: span 2;
+	}
+
+	/* 4 Images: 2x2 Grid */
+	.image-preview-grid[data-total='4'] {
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		aspect-ratio: 16/9;
 	}
 </style>

src/lib/at/client.ts

···
 import * as v from '@atcute/lexicons/validations';
 import { MiniDocQuery, type MiniDoc } from './slingshot';
 import { BacklinksQuery, type Backlinks, type BacklinksSource } from './constellation';
-import type { Records } from '@atcute/lexicons/ambient';
+import type { Records, XRPCProcedures } from '@atcute/lexicons/ambient';
 import { cache as rawCache } from '$lib/cache';
 import { AppBskyActorProfile } from '@atcute/bluesky';
 import { WebSocket } from '@soffinal/websocket';
 import type { Notification } from './stardust';
-import { get } from 'svelte/store';
-import { settings } from '$lib/settings';
 import type { OAuthUserAgent } from '@atcute/oauth-browser-client';
 import { timestampFromCursor, toCanonicalUri, toResourceUri } from '$lib';
-
-export const slingshotUrl: URL = new URL(get(settings).endpoints.slingshot);
-export const spacedustUrl: URL = new URL(get(settings).endpoints.spacedust);
-export const constellationUrl: URL = new URL(get(settings).endpoints.constellation);
+import { constellationUrl, slingshotUrl, spacedustUrl } from '.';
 
 export type RecordOutput<Output> = { uri: ResourceUri; cid: Cid | undefined; record: Output };
 
···
 
 const cache = cacheWithRecords;
 
-const wrapBlobWithProgress = (
-	blob: Blob,
-	onProgress: (uploaded: number, total: number) => void
-): ReadableStream<Uint8Array> => {
-	const totalSize = blob.size;
-	let uploaded = 0;
+export const xhrPost = (
+	url: string,
+	body: Blob | File,
+	headers: Record<string, string> = {},
+	onProgress?: (uploaded: number, total: number) => void
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Promise<Result<any, { error: string; message: string }>> => {
+	return new Promise((resolve) => {
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', url);
 
-	return new ReadableStream({
-		start: async (controller) => {
-			const reader = blob.stream().getReader();
+		if (onProgress && xhr.upload) {
+			xhr.upload.onprogress = (event: ProgressEvent) => {
+				if (event.lengthComputable) {
+					onProgress(event.loaded, event.total);
+				}
+			};
+		}
 
-			const push = async () => {
-				const { done, value } = await reader.read();
+		Object.keys(headers).forEach((key) => {
+			xhr.setRequestHeader(key, headers[key]);
+		});
 
-				if (done) {
-					controller.close();
-					return;
-				}
+		xhr.onload = () => {
+			if (xhr.status >= 200 && xhr.status < 300) {
+				resolve(ok(JSON.parse(xhr.responseText)));
+			} else {
+				resolve(err(JSON.parse(xhr.responseText)));
+			}
+		};
 
-				uploaded += value.byteLength;
-				onProgress(uploaded, totalSize);
+		xhr.onerror = () => {
+			resolve(err({ error: 'xhr_error', message: 'network error' }));
+		};
 
-				controller.enqueue(value);
-				await push();
-			};
+		xhr.onabort = () => {
+			resolve(err({ error: 'xhr_error', message: 'upload aborted' }));
+		};
 
-			await push();
-		}
+		xhr.send(body);
 	});
 };
 
···
 		return results;
 	}
 
-	async uploadBlob(
-		blob: Blob,
-		onProgress?: (progress: number) => void
-	): Promise<Result<AtpBlob<string>, string>> {
-		if (!this.atcute) return err('not authenticated');
-		const input = wrapBlobWithProgress(blob, (uploaded, total) => onProgress?.(uploaded / total));
-		const res = await this.atcute.post('com.atproto.repo.uploadBlob', { input });
-		if (!res.ok) return err(`upload failed: ${res.data.error}`);
-		return ok(res.data.blob);
-	}
-
-	async uploadVideo(
-		blob: Blob,
-		onStatus?: (status: UploadStatus) => void
-	): Promise<Result<AtpBlob<string>, string>> {
+	async getServiceAuth(lxm: keyof XRPCProcedures, exp: number): Promise<Result<string, string>> {
 		if (!this.atcute || !this.user) return err('not authenticated');
-
-		onStatus?.({ stage: 'auth' });
-		const serviceAuthUrl = new URL(`${this.user.pds}/xrpc/com.atproto.server.getServiceAuth`);
-		serviceAuthUrl.searchParams.append('aud', this.user.pds.replace('https://', 'did:web:'));
+		const serviceAuthUrl = new URL(`${this.user.pds}xrpc/com.atproto.server.getServiceAuth`);
+		serviceAuthUrl.searchParams.append(
+			'aud',
+			this.user.pds.replace('https://', 'did:web:').slice(0, -1)
+		);
 		serviceAuthUrl.searchParams.append('lxm', 'com.atproto.repo.uploadBlob');
-		serviceAuthUrl.searchParams.append('exp', (Math.floor(Date.now() / 1000) + 60 * 30).toString()); // 30 minutes
+		serviceAuthUrl.searchParams.append('exp', exp.toString()); // 30 minutes
 
 		const serviceAuthResponse = await this.atcute.handler(
 			`${serviceAuthUrl.pathname}${serviceAuthUrl.search}`,
···
 			const error = await serviceAuthResponse.text();
 			return err(`failed to get service auth: ${error}`);
 		}
-
 		const serviceAuth = await serviceAuthResponse.json();
-		const token = serviceAuth.token;
+		return ok(serviceAuth.token);
+	}
+
+	async uploadBlob(
+		blob: Blob,
+		onProgress?: (progress: number) => void
+	): Promise<Result<AtpBlob<string>, string>> {
+		if (!this.atcute || !this.user) return err('not authenticated');
+		const tokenResult = await this.getServiceAuth(
+			'com.atproto.repo.uploadBlob',
+			Math.floor(Date.now() / 1000) + 60
+		);
+		if (!tokenResult.ok) return tokenResult;
+		const result = await xhrPost(
+			`${this.user.pds}xrpc/com.atproto.repo.uploadBlob`,
+			blob,
+			{ authorization: `Bearer ${tokenResult.value}` },
+			(uploaded, total) => onProgress?.(uploaded / total)
+		);
+		if (!result.ok) return err(`upload failed: ${result.error.message}`);
+		return ok(result.value);
+	}
+
+	async uploadVideo(
+		blob: Blob,
+		mimeType: string,
+		onStatus?: (status: UploadStatus) => void
+	): Promise<Result<AtpBlob<string>, string>> {
+		if (!this.atcute || !this.user) return err('not authenticated');
+
+		onStatus?.({ stage: 'auth' });
+		const tokenResult = await this.getServiceAuth(
+			'com.atproto.repo.uploadBlob',
+			Math.floor(Date.now() / 1000) + 60 * 30
+		);
+		if (!tokenResult.ok) return tokenResult;
 
 		onStatus?.({ stage: 'uploading' });
 		const uploadUrl = new URL('https://video.bsky.app/xrpc/app.bsky.video.uploadVideo');
 		uploadUrl.searchParams.append('did', this.user.did);
-		uploadUrl.searchParams.append('name', 'video.mp4');
+		uploadUrl.searchParams.append('name', 'video');
 
-		const body = wrapBlobWithProgress(blob, (uploaded, total) =>
-			onStatus?.({ stage: 'uploading', progress: uploaded / total })
-		);
-		const uploadResponse = await fetch(uploadUrl.toString(), {
-			method: 'POST',
-			headers: {
-				Authorization: `Bearer ${token}`,
-				'Content-Type': 'video/mp4'
+		const uploadResult = await xhrPost(
+			uploadUrl.toString(),
+			blob,
+			{
+				Authorization: `Bearer ${tokenResult.value}`,
+				'Content-Type': mimeType
 			},
-			body
-		});
-		if (!uploadResponse.ok) {
-			const error = await uploadResponse.text();
-			return err(`failed to upload video: ${error}`);
-		}
-
-		const jobStatus = await uploadResponse.json();
+			(uploaded, total) => onStatus?.({ stage: 'uploading', progress: uploaded / total })
+		);
+		if (!uploadResult.ok) return err(`failed to upload video: ${uploadResult.error.message}`);
+		const jobStatus = uploadResult.value;
 		let videoBlobRef: AtpBlob<string> = jobStatus.blob;
 
 		onStatus?.({ stage: 'processing' });
···
 			} else if (status.jobStatus.progress !== undefined) {
 				onStatus?.({
 					stage: 'processing',
-					progress: status.jobStatus.progress
+					progress: status.jobStatus.progress / 100
 				});
 			}
 		}

src/lib/at/index.ts

···
+import { settings } from '$lib/settings';
+import { get } from 'svelte/store';
+
+export const slingshotUrl: URL = new URL(get(settings).endpoints.slingshot);
+export const spacedustUrl: URL = new URL(get(settings).endpoints.spacedust);
+export const constellationUrl: URL = new URL(get(settings).endpoints.constellation);

src/lib/at/oauth.ts

···
 	WebDidDocumentResolver,
 	XrpcHandleResolver
 } from '@atcute/identity-resolver';
-import { slingshotUrl } from './client';
 import type { ActorIdentifier } from '@atcute/lexicons';
 import { err, ok, type Result } from '$lib/result';
 import type { AtprotoDid } from '@atcute/lexicons/syntax';
 import { clientId, oauthMetadata, redirectUri } from '$lib/oauth';
+import { slingshotUrl } from '.';
 
 configureOAuth({
 	metadata: {

src/lib/oauth.ts

···
 	client_uri: domain,
 	logo_uri: `${domain}/favicon.png`,
 	redirect_uris: [`${domain}/`],
-	scope: 'atproto repo:*?action=create&action=update&action=delete blob:*/*',
+	scope:
+		'atproto repo:*?action=create&action=update&action=delete rpc:com.atproto.repo.uploadBlob?aud=* blob:*/*',
 	grant_types: ['authorization_code', 'refresh_token'],
 	response_types: ['code'],
 	token_endpoint_auth_method: 'none',

src/lib/result.ts

···
 	return { ok: true, value };
 };
 export const err = <E>(error: E): Err<E> => {
+	console.error(error);
 	return { ok: false, error };
 };
 export const expect = <T, E>(v: Result<T, E>, msg: string = 'expected result to not be error:') => {

src/routes/[...catchall]/+page.svelte

···
 	import { JetstreamSubscription } from '@atcute/jetstream';
 	import { settings } from '$lib/settings';
 	import type { Sort } from '$lib/following';
+	import { SvelteMap } from 'svelte/reactivity';
 
 	const { data: loadData }: PageProps = $props();
 
···
 		else animClass = 'animate-fade-in-scale';
 	});
 
-	let postComposerState = $state<PostComposerState>({ focus: 'null', text: '' });
+	let postComposerState = $state<PostComposerState>({
+		focus: 'null',
+		text: '',
+		blobsState: new SvelteMap()
+	});
 	let showScrollToTop = $state(false);
 	const handleScroll = () => {
 		if (currentRoute.path === '/' || currentRoute.path === '/profile/:actor')

src/routes/[...catchall]/+page.ts

···
-import { replaceState } from '$app/navigation';
 import { addAccount, loggingIn } from '$lib/accounts';
 import { AtpClient } from '$lib/at/client';
 import { flow, sessions } from '$lib/at/oauth';
···
 	const currentUrl = new URL(window.location.href);
 	// scrub history so auth state cant be replayed
 	try {
-		replaceState('', '/');
+		history.replaceState(null, '', '/');
 	} catch {
 		// if router was unitialized then we probably dont need to scrub anyway
 		// so its fine