File Uploader AI

The File Uploader lets users pick files, drag and drop them, or import them from the camera, the microphone, the screen, a link and cloud drives. It is built on the upup engine: without somewhere to upload to, the files go with the form like a native file input. With it, the user uploads the files with the upload button, or each file is uploaded as it is added with autoUpload, and the form submits their keys.

Usage

<script>
	import { FileUploader, Label } from 'fluentui-svelte';

	let files = $state([]);
</script>

<Label label="Upload" labelPosition="above">
	<FileUploader
		bind:files
		name="attachments"
		accept=".jpg,.jpeg,.png,.pdf,.mp4"
		maxFileSize={50 * 1024 * 1024}
		description="JPEG, PNG, PDF, and MP4 formats, up to 50 MB."
	/>
</Label>

Multiple Selection

Set multiple, or a maxFiles above 1, to accept several files, and maxFileSize, minFileSize or maxTotalFileSize to limit them. Files outside the limits are left out, with a message saying why. showLimits shows the limits at the foot of the drop zone.

<FileUploader
	maxFiles={5}
	maxFileSize={10 * 1024 * 1024}
	maxTotalFileSize={30 * 1024 * 1024}
	accept="image/*"
	showLimits
/>

Sources

Each source in sources adds a button to the drop zone. Camera, audio and screen record in the browser, and a link imports a file from its URL. Cloud drives use googleDriveSource, oneDriveSource, dropboxSource and boxSource; only the ones passed are bundled.

<script>
	import { FileUploader, googleDriveSource, oneDriveSource, dropboxSource, boxSource } from 'fluentui-svelte';
</script>

<FileUploader
	multiple
	sources={[
		'local',
		'url',
		'camera',
		'microphone',
		'screen',
		googleDriveSource({ clientId: '...', apiKey: '...', appId: '...' }),
		oneDriveSource({ clientId: '...' }),
		dropboxSource({ clientId: '...' }),
		boxSource({ clientId: '...' })
	]}
/>

The browser can only read a file from another site when that site allows it (CORS). To import from any link, send it through your server with fetchLink. Allow only the hosts you trust: a route that fetches any URL can reach your internal network.

<FileUploader
	sources={['local', 'url']}
	fetchLink={(url, signal) => fetch(`/api/fetch-link?url=${encodeURIComponent(url)}`, { signal })}
/>

// src/routes/api/fetch-link/+server.ts
import { error } from '@sveltejs/kit';

const ALLOWED_HOSTS = ['images.example.com', 'files.example.com'];

export async function GET({ url, fetch }) {
	const link = new URL(url.searchParams.get('url') ?? '');
	if (link.protocol !== 'https:' || !ALLOWED_HOSTS.includes(link.hostname)) error(400, 'Link not allowed');
	// A redirect could lead to a host out of the list: it fails instead.
	const response = await fetch(link, { redirect: 'error' }).catch(() => error(502, 'The file could not be fetched'));
	if (!response.ok) error(502, 'The file could not be fetched');
	return new Response(response.body, {
		headers: {
			'content-type': response.headers.get('content-type') ?? 'application/octet-stream',
			'content-disposition': response.headers.get('content-disposition') ?? ''
		}
	});
}

Uploading

Pass upload with an uploadEndpoint, or a serverUrl for @useupup/server. The files are uploaded with the button under the list, or as soon as they are added with autoUpload, and the form submits the key of each file instead of the file. A submission waits until every file is uploaded.

<FileUploader
	name="attachments"
	multiple
	upload={{ provider: 'aws', uploadEndpoint: '/api/upload-token' }}
	autoUpload
	onUploadComplete={(files) => console.log(files.map((file) => file.key))}
/>

The uploadEndpoint receives the name, size and type of each file, and returns its key and a presigned URL of your storage to upload it to.

// src/routes/api/upload-token/+server.ts
import { json } from '@sveltejs/kit';
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

const s3 = new S3Client({ region: 'us-east-1' });

export async function POST({ request }) {
	const { name, type } = await request.json();
	const key = `uploads/${crypto.randomUUID()}-${name}`;
	const uploadUrl = await getSignedUrl(s3, new PutObjectCommand({ Bucket: 'my-bucket', Key: key, ContentType: type }), {
		expiresIn: 300
	});
	return json({ key, uploadUrl });
}

Forms

Without upload, the uploader is a native file input: the form submits the files under its name, and required, reset and the Label work as with any field. Submit the form with no file to see the invalid state.

<form method="POST" enctype="multipart/form-data">
	<Label label="Name" labelPosition="above">
		<TextBox name="name" required />
	</Label>
	<Label label="Attachments" labelPosition="above">
		<FileUploader name="attachments" multiple required showLimits maxFiles={3} maxFileSize={5 * 1024 * 1024} />
	</Label>
	<Button appearance="accent" type="submit">Send</Button>
	<Button type="reset">Reset</Button>
</form>

Labels

labels changes any text of the uploader. Pass only the texts to change; the rest stay in English (FILE_UPLOADER_LABELS). Texts with a value, like tooLarge, are functions.

<script>
	import { FileUploader } from 'fluentui-svelte';

	// Only the texts given change; the others keep the English of FILE_UPLOADER_LABELS.
	const labels = {
		dropTitle: () => 'Drop your résumé here',
		browse: 'Choose a résumé',
		remove: (name) => `Remove ${name}`,
		tooLarge: (name, max) => `${name} is over ${max}.`
	};
</script>

<FileUploader {labels} accept=".pdf,.docx" maxFileSize={2 * 1024 * 1024} description="PDF or Word, up to 2 MB." />

State and Events

Bind files to read the list: each file is a File with its status and, once uploaded, its key. onFilesAdded, onFileRemoved and onReject follow the list, and onUploadComplete and onUploadError the uploads. Bind uploader to drive the upup engine itself: upload(), pause(), resume() or cancel().

<script>
	import { FileUploader } from 'fluentui-svelte';

	let files = $state([]);
	let events = $state([]);
	const log = (entry) => (events = [entry, ...events]);
</script>

<FileUploader
	bind:files
	multiple
	accept="image/*"
	onFilesAdded={(added) => log(`onFilesAdded: ${added.map((file) => file.name).join(', ')}`)}
	onFileRemoved={(file) => log(`onFileRemoved: ${file.name}`)}
	onReject={(rejections) => log(`onReject: ${rejections.map((r) => `${r.file.name} (${r.reason})`).join(', ')}`)}
/>
<p>{files.length} files</p>

Component Props