File Uploader AI

El File Uploader permite elegir archivos, arrastrarlos y soltarlos, o importarlos desde la cámara, el micrófono, la pantalla, un enlace y nubes de almacenamiento. Está construido sobre el motor de upup: sin un destino de subida, los archivos se envían con el formulario como en un input de archivo nativo. Con él, el usuario sube los archivos con el botón de subida, o cada archivo se sube al añadirse con autoUpload, y el formulario envía sus claves.

Uso

<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>

Selección múltiple

Usa multiple, o un maxFiles mayor que 1, para aceptar varios archivos, y maxFileSize, minFileSize o maxTotalFileSize para limitarlos. Los archivos fuera de los límites se dejan fuera, con un mensaje que dice por qué. showLimits muestra los límites al pie de la zona de soltar.

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

Orígenes

Cada origen en sources añade un botón a la zona de soltar. Cámara, audio y pantalla graban en el navegador, y un enlace importa un archivo desde su URL. Las nubes usan googleDriveSource, oneDriveSource, dropboxSource y boxSource; solo se incluyen las que pasas.

<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: '...' })
	]}
/>

El navegador solo puede leer un archivo de otro sitio si ese sitio lo permite (CORS). Para importar desde cualquier enlace, pásalo por tu servidor con fetchLink. Permite solo los hosts en los que confías: una ruta que trae cualquier URL puede llegar a tu red interna.

<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') ?? ''
		}
	});
}

Subida

Pasa upload con un uploadEndpoint, o un serverUrl para @useupup/server. Los archivos se suben con el botón bajo la lista, o en cuanto se añaden con autoUpload, y el formulario envía la clave de cada archivo en lugar del archivo. Un envío espera a que todos los archivos estén subidos.

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

El uploadEndpoint recibe el nombre, el tamaño y el tipo de cada archivo, y devuelve su clave y una URL prefirmada de tu almacenamiento a la que subirlo.

// 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 });
}

Formularios

Sin upload, el uploader es un input de archivo nativo: el formulario envía los archivos bajo su name, y required, el reset y el Label funcionan como en cualquier campo. Envía el formulario sin archivos para ver el estado inválido.

<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>

Textos

labels cambia cualquier texto del uploader. Pasa solo los textos a cambiar; el resto queda en inglés (FILE_UPLOADER_LABELS). Los textos con un valor, como tooLarge, son funciones.

<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." />

Estado y eventos

Enlaza files para leer la lista: cada archivo es un File con su status y, una vez subido, su key. onFilesAdded, onFileRemoved y onReject siguen la lista, y onUploadComplete y onUploadError las subidas. Enlaza uploader para manejar el motor de upup directamente: upload(), pause(), resume() o 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>

Propiedades del componente