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"