From 4f92cdd102f226c7a97e081272e31c5853ca3d36 Mon Sep 17 00:00:00 2001
From: sax3l <simon@siax.io>
Date: Fri, 6 Nov 2026 11:04:03 +0100
Subject: [PATCH] fix(portal): reuse canonic @siax/ui FileDropzone instead of a
 local ad-hoc one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

0pt rendered its own dashed drop surface (role=button + hidden input). @siax/ui
already ships FileDropzone — the native labelled input with drag-over/drop
forwarding, aria wiring and no upload logic — so replace the local variant
(REUSE, CLASSIFICATION per UI standard). Removes the local inputRef.
---
 app/portal/dokument/page.tsx | 38 ++++++++++--------------------------
 1 file changed, 10 insertions(+), 28 deletions(-)

diff --git a/app/portal/dokument/page.tsx b/app/portal/dokument/page.tsx
index f7fbf75..b9e14d7 100644
--- a/app/portal/dokument/page.tsx
+++ b/app/portal/dokument/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { FileDropzone } from '@siax/ui/components/file-dropzone';
 import { useT } from '@/components/locale-provider';
 import { PortalShell } from '@/components/portal-shell';
 
@@ -72,7 +73,6 @@ export default function DocumentsPage() {
   const [uploadNote, setUploadNote] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
   const [unknownOutcome, setUnknownOutcome] = useState<unknown | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
   // One idempotency key per selected file: a retry (double click, network
   // error, reload-and-pick-the-same-file) returns the SAME document instead of
   // creating a duplicate. Picking a different file resets it.
@@ -277,34 +277,16 @@ export default function DocumentsPage() {
             />
           </label>
 
-          <div
-            role="button"
-            tabIndex={0}
-            onClick={() => inputRef.current?.click()}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                inputRef.current?.click();
-              }
+          <FileDropzone
+            className="mt-4"
+            label={t({ en: 'choose a file', sv: 'välj en fil' })}
+            hint={file ? file.name : t({ en: 'PDF, Word, Excel, CSV, images…', sv: 'PDF, Word, Excel, CSV, bilder…' })}
+            disabled={uploading}
+            onFiles={(files) => {
+              uploadKey.current = null;
+              setFile(files[0] ?? null);
             }}
-            className="mt-4 flex cursor-pointer flex-col items-center justify-center border border-dashed border-border px-6 py-10 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <span className={label}>{t({ en: 'choose a file', sv: 'välj en fil' })}</span>
-            <span className="mt-3 text-[15px]">
-              {file
-                ? file.name
-                : t({ en: 'PDF, Word, Excel, CSV, images…', sv: 'PDF, Word, Excel, CSV, bilder…' })}
-            </span>
-            <input
-              ref={inputRef}
-              type="file"
-              className="hidden"
-              onChange={(event) => {
-                uploadKey.current = null;
-                setFile(event.target.files?.[0] ?? null);
-              }}
-            />
-          </div>
+          />
 
           <button
             type="button"
-- 
2.54.0