fix(portal): reuse canonic @siax/ui FileDropzone instead of a local ad-hoc one
CI (SIAX Cloud) / sonar (pull_request) Skipped
masterplan-lock / check (push) Successful in 4s
masterplan-lock / check (pull_request) Successful in 5s
CI (SIAX Cloud) / security (pull_request) Successful in 16s
Security Scan (SIAX Cloud) / security (pull_request) Successful in 16s
CI (SIAX Cloud) / integration (pull_request) Successful in 57s
CI (SIAX Cloud) / quality (pull_request) Successful in 10m21s

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.
This commit is contained in:
2026-11-06 11:04:03 +01:00
parent 9ca16b7f6c
commit 4f92cdd102
+10 -28
View File
@@ -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"