From d8da7e2a05b93a1c7b48dcd6189ab8dbe6a1a2d9 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Fri, 14 Nov 2025 21:55:28 -0300
Subject: [PATCH] refactor: enhance FileUpload component with improved error
 handling and UI updates

- Refactored the FileUpload component to improve code readability and maintainability.
- Enhanced error handling during file upload and removal processes, providing clearer feedback to users.
- Updated UI elements for better alignment and consistency, including file type previews and action buttons.
- Integrated the resolve function for help URLs to ensure proper linking.
- Streamlined file validation logic for size and type checks, improving user experience.
---
 apps/web/src/lib/components/FileUpload.svelte | 437 +++++++++---------
 1 file changed, 228 insertions(+), 209 deletions(-)

diff --git a/apps/web/src/lib/components/FileUpload.svelte b/apps/web/src/lib/components/FileUpload.svelte
index f02260a..1e7768e 100644
--- a/apps/web/src/lib/components/FileUpload.svelte
+++ b/apps/web/src/lib/components/FileUpload.svelte
@@ -1,74 +1,74 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import {
-    ExternalLink,
-    FileText,
-    File as FileIcon,
-    Upload,
-    Trash2,
-    Eye,
-    RefreshCw,
-  } from "lucide-svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { resolve } from '$app/paths';
+	import {
+		ExternalLink,
+		FileText,
+		File as FileIcon,
+		Upload,
+		Trash2,
+		Eye,
+		RefreshCw
+	} from 'lucide-svelte';
 
-  interface Props {
-    label: string;
-    helpUrl?: string;
-    value?: string; // storageId
-    disabled?: boolean;
-    required?: boolean;
-    onUpload: (file: globalThis.File) => Promise<void>;
-    onRemove: () => Promise<void>;
-  }
+	interface Props {
+		label: string;
+		helpUrl?: string;
+		value?: string; // storageId
+		disabled?: boolean;
+		required?: boolean;
+		onUpload: (file: globalThis.File) => Promise<void>;
+		onRemove: () => Promise<void>;
+	}
 
-  let {
-    label,
-    helpUrl,
-    value = $bindable(),
-    disabled = false,
-    required = false,
-    onUpload,
-    onRemove,
-  }: Props = $props();
+	let {
+		label,
+		helpUrl,
+		value = $bindable(),
+		disabled = false,
+		required = false,
+		onUpload,
+		onRemove
+	}: Props = $props();
 
-  const client = useConvexClient();
+	const client = useConvexClient() as unknown as {
+		storage: {
+			getUrl: (id: string) => Promise<string | null>;
+		};
+	};
 
-  let fileInput: HTMLInputElement;
-  let uploading = $state(false);
-  let error = $state<string | null>(null);
-  let fileName = $state<string>("");
-  let fileType = $state<string>("");
-  let previewUrl = $state<string | null>(null);
-  let fileUrl = $state<string | null>(null);
+	let fileInput: HTMLInputElement;
+	let uploading = $state(false);
+	let error = $state<string | null>(null);
+	let fileName = $state<string>('');
+	let fileType = $state<string>('');
+	let previewUrl = $state<string | null>(null);
+	let fileUrl = $state<string | null>(null);
 
-  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-  const ALLOWED_TYPES = [
-    "application/pdf",
-    "image/jpeg",
-    "image/jpg",
-    "image/png",
-  ];
+	const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+	const ALLOWED_TYPES = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
 
 	// Buscar URL do arquivo quando houver um storageId
 	$effect(() => {
 		if (value && !fileName) {
 			// Tem storageId mas não é um upload recente
-			loadExistingFile(value);
+			void loadExistingFile(value);
 		}
 	});
 
 	async function loadExistingFile(storageId: string) {
 		try {
-			const url = await client.storage.getUrl(storageId as any);
+			const url = await client.storage.getUrl(storageId);
 			if (url) {
-  async function handleFileSelect(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const file = target.files?.[0];
+				fileUrl = url;
+
 				// Detectar tipo pelo URL ou assumir PDF
 				if (url.includes('.pdf') || url.includes('application/pdf')) {
 					fileType = 'application/pdf';
 				} else {
 					fileType = 'image/jpeg';
-					previewUrl = url; // Para imagens, a URL serve como preview
+					// Para imagens, a URL serve como preview
+					previewUrl = url;
 				}
 			}
 		} catch (err) {
@@ -76,111 +76,130 @@
 		}
 	}
 
-    error = null;
+	async function handleFileSelect(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
 
-    // Validate file size
-    if (file.size > MAX_FILE_SIZE) {
-      error = "Arquivo muito grande. Tamanho máximo: 10MB";
-      target.value = "";
-      return;
-    }
+		if (!file) {
+			return;
+		}
 
-    // Validate file type
-    if (!ALLOWED_TYPES.includes(file.type)) {
-      error = "Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)";
-      target.value = "";
-      return;
-    }
+		error = null;
 
-    try {
-      uploading = true;
-      fileName = file.name;
-      fileType = file.type;
+		// Validate file size
+		if (file.size > MAX_FILE_SIZE) {
+			error = 'Arquivo muito grande. Tamanho máximo: 10MB';
+			target.value = '';
+			return;
+		}
 
-      // Create preview for images
-      if (file.type.startsWith("image/")) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          previewUrl = e.target?.result as string;
-        };
-        reader.readAsDataURL(file);
-      }
+		// Validate file type
+		if (!ALLOWED_TYPES.includes(file.type)) {
+			error = 'Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)';
+			target.value = '';
+			return;
+		}
 
-      await onUpload(file);
-    } catch (err: any) {
-      error = err?.message || "Erro ao fazer upload do arquivo";
-      previewUrl = null;
-    } finally {
-      uploading = false;
-      target.value = "";
-    }
-  }
+		try {
+			uploading = true;
+			fileName = file.name;
+			fileType = file.type;
 
-  async function handleRemove() {
-    if (!confirm("Tem certeza que deseja remover este arquivo?")) {
-      return;
-    }
+			// Create preview for images
+			if (file.type.startsWith('image/')) {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					const result = e.target?.result;
+					if (typeof result === 'string') {
+						previewUrl = result;
+					}
+				};
+				reader.readAsDataURL(file);
+			} else {
+				previewUrl = null;
+			}
 
-    try {
-      uploading = true;
-      await onRemove();
-      fileName = "";
-      fileType = "";
-      previewUrl = null;
-      fileUrl = null;
-    } catch (err: any) {
-      error = err?.message || "Erro ao remover arquivo";
-    } finally {
-      uploading = false;
-    }
-  }
+			await onUpload(file);
+		} catch (err: unknown) {
+			if (err instanceof Error) {
+				error = err.message || 'Erro ao fazer upload do arquivo';
+			} else {
+				error = 'Erro ao fazer upload do arquivo';
+			}
+			previewUrl = null;
+		} finally {
+			uploading = false;
+			target.value = '';
+		}
+	}
 
-  function handleView() {
-    if (fileUrl) {
-      window.open(fileUrl, "_blank");
-    }
-  }
+	async function handleRemove() {
+		if (!confirm('Tem certeza que deseja remover este arquivo?')) {
+			return;
+		}
 
-  function openFileDialog() {
-    fileInput?.click();
-  }
+		try {
+			uploading = true;
+			await onRemove();
+			fileName = '';
+			fileType = '';
+			previewUrl = null;
+			fileUrl = null;
+			error = null;
+		} catch (err: unknown) {
+			if (err instanceof Error) {
+				error = err.message || 'Erro ao remover arquivo';
+			} else {
+				error = 'Erro ao remover arquivo';
+			}
+		} finally {
+			uploading = false;
+		}
+	}
+
+	function handleView() {
+		if (fileUrl) {
+			window.open(fileUrl, '_blank');
+		}
+	}
+
+	function openFileDialog() {
+		fileInput?.click();
+	}
 </script>
 
 <div class="form-control w-full">
-  <label class="label" for="file-upload-input">
-    <span class="label-text font-medium flex items-center gap-2">
-      {label}
-      {#if required}
-        <span class="text-error">*</span>
-      {/if}
-      {#if helpUrl}
-        <div
-          class="tooltip tooltip-right"
-          data-tip="Clique para acessar o link"
-        >
-          <a
-            href={helpUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-primary hover:text-primary-focus transition-colors"
-            aria-label="Acessar link"
-          >
-            <ExternalLink class="h-4 w-4" strokeWidth={2} />
-          </a>
-        </div>
-      {/if}
-    </span>
-  </label>
+	<label class="label" for="file-upload-input">
+		<span class="label-text flex items-center gap-2 font-medium">
+			{label}
+			{#if required}
+				<span class="text-error">*</span>
+			{/if}
+			{#if helpUrl}
+				<div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
+					<a
+						href={resolve(helpUrl)}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-primary hover:text-primary-focus transition-colors"
+						aria-label="Acessar link"
+					>
+						<ExternalLink class="h-4 w-4" strokeWidth={2} />
+					</a>
+				</div>
+			{/if}
+		</span>
+	</label>
 
-  <input
-    id="file-upload-input"
-    type="file"
-    bind:this={fileInput}
-    onchange={handleFileSelect}
-    accept=".pdf,.jpg,.jpeg,.png"
-    class="hidden"
-    {disabled}
-  />
+	<input
+		id="file-upload-input"
+		type="file"
+		bind:this={fileInput}
+		onchange={handleFileSelect}
+		accept=".pdf,.jpg,.jpeg,.png"
+		class="hidden"
+		{disabled}
+	/>
 
 	{#if value || fileName}
 		<div class="border-base-300 bg-base-100 flex items-center gap-2 rounded-lg border p-3">
@@ -194,78 +213,78 @@
 					</div>
 				{:else}
 					<div class="bg-success/10 flex h-12 w-12 items-center justify-center rounded">
-						<File class="text-success h-6 w-6" strokeWidth={2} />
+						<FileIcon class="text-success h-6 w-6" strokeWidth={2} />
 					</div>
 				{/if}
 			</div>
 
-      <!-- File info -->
-      <div class="flex-1 min-w-0">
-        <p class="text-sm font-medium truncate">
-          {fileName || "Arquivo anexado"}
-        </p>
-        <p class="text-xs text-base-content/60">
-          {#if uploading}
-            Carregando...
-          {:else}
-            Enviado com sucesso
-          {/if}
-        </p>
-      </div>
+			<!-- File info -->
+			<div class="min-w-0 flex-1">
+				<p class="truncate text-sm font-medium">
+					{fileName || 'Arquivo anexado'}
+				</p>
+				<p class="text-base-content/60 text-xs">
+					{#if uploading}
+						Carregando...
+					{:else}
+						Enviado com sucesso
+					{/if}
+				</p>
+			</div>
 
-      <!-- Actions -->
-      <div class="flex gap-2">
-        {#if fileUrl}
-          <button
-            type="button"
-            onclick={handleView}
-            class="btn btn-sm btn-ghost text-info"
-            disabled={uploading || disabled}
-            title="Visualizar arquivo"
-          >
-            <Eye class="h-4 w-4" strokeWidth={2} />
-          </button>
-        {/if}
-        <button
-          type="button"
-          onclick={openFileDialog}
-          class="btn btn-sm btn-ghost"
-          disabled={uploading || disabled}
-          title="Substituir arquivo"
-        >
-          <RefreshCw class="h-4 w-4" strokeWidth={2} />
-        </button>
-        <button
-          type="button"
-          onclick={handleRemove}
-          class="btn btn-sm btn-ghost text-error"
-          disabled={uploading || disabled}
-          title="Remover arquivo"
-        >
-          <Trash2 class="h-4 w-4" strokeWidth={2} />
-        </button>
-      </div>
-    </div>
-  {:else}
-    <button
-      type="button"
-      onclick={openFileDialog}
-      class="btn btn-outline btn-block justify-start gap-2"
-      disabled={uploading || disabled}
-    >
-      {#if uploading}
-        <span class="loading loading-spinner loading-sm"></span>
-        Carregando...
-      {:else}
-        <Upload class="h-5 w-5" strokeWidth={2} />
-        Selecionar arquivo (PDF ou imagem, máx. 10MB)
-      {/if}
-    </button>
-  {/if}
+			<!-- Actions -->
+			<div class="flex gap-2">
+				{#if fileUrl}
+					<button
+						type="button"
+						onclick={handleView}
+						class="btn btn-sm btn-ghost text-info"
+						disabled={uploading || disabled}
+						title="Visualizar arquivo"
+					>
+						<Eye class="h-4 w-4" strokeWidth={2} />
+					</button>
+				{/if}
+				<button
+					type="button"
+					onclick={openFileDialog}
+					class="btn btn-sm btn-ghost"
+					disabled={uploading || disabled}
+					title="Substituir arquivo"
+				>
+					<RefreshCw class="h-4 w-4" strokeWidth={2} />
+				</button>
+				<button
+					type="button"
+					onclick={handleRemove}
+					class="btn btn-sm btn-ghost text-error"
+					disabled={uploading || disabled}
+					title="Remover arquivo"
+				>
+					<Trash2 class="h-4 w-4" strokeWidth={2} />
+				</button>
+			</div>
+		</div>
+	{:else}
+		<button
+			type="button"
+			onclick={openFileDialog}
+			class="btn btn-outline btn-block justify-start gap-2"
+			disabled={uploading || disabled}
+		>
+			{#if uploading}
+				<span class="loading loading-spinner loading-sm"></span>
+				Carregando...
+			{:else}
+				<Upload class="h-5 w-5" strokeWidth={2} />
+				Selecionar arquivo (PDF ou imagem, máx. 10MB)
+			{/if}
+		</button>
+	{/if}
 
-  {#if error}
-    <div class="label">
-      <span class="label-text-alt text-error">{error}</span>
-    </div>
-  {/if}
+	{#if error}
+		<div class="label">
+			<span class="label-text-alt text-error">{error}</span>
+		</div>
+	{/if}
 </div>