Komponenter

Vedhæft fil

Komponenten lader brugeren tilføje og indsende en fil.

Åbn dette eksempel i et nyt vindue

Vedhæft fil

Sådan bruges komponenten

Anvendes til

Brug komponenten til at lade brugeren vælge og overføre en fil fra sin egen computer, tablet eller mobil.

Du bør kun bruge vedhæftet fil, hvis det er strengt nødvendigt for din løsning.

Vejledning

Sørg for at brugeren får en positiv respons, når filen er overført.

Gør tydeligt brugeren opmærksom på, hvilke formater og størrelser, der vil blive accepteret.

Tjek filformatet før overførslen går i gang, så brugeren ikke spilder tid.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Åbn dette eksempel i et nyt vindue

Vedhæft fil Filens størrelse skal være under 2MB

Se komponenten i eksempelløsninger

Installation

HTML Struktur

<div class="form-group file-input">
    <label class="form-label" for="form-fileinput">Vedhæft fil</label>
    <input type="file" id="form-fileinput" name="file">
</div>

Vi anbefaler at bruge det indbyggede input felt til filer type="file" frem for en skræddersyet løsning.

Årsagen til dette er:

at feltet får fokus, når man navigerer ved brug af tastaturet
at feltet fungerer ved brug af tastatur
at feltet fungerer ved brug af hjælpemidler
at feltet fungerer, selv når JavaScript er utilgængeligt.

Du bør anvende ovenstående kriterier til en skræddersyet løsning for denne type felt.

Om custom elements

Vedhæft fil er en tilgængelig filupload-komponent, der understøtter både drag-and-drop og traditionel filvalg.

Komponenten viser valgte filer i en liste med mulighed for at fjerne individuelle filer og tilføje flere. Den følger accessibility-standarder med korrekt tastaturnavigation og skærmlæserunderstøttelse.

HTML-muligheder

Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.

Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-upload-file> med <div class="fds-upload-file">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.

Eksempler

Vedhæft fil lavet med custom element

Åbn i et nyt vindue

Simpel vedhæft fil

<fds-upload-file>
    <label>Simpel vedhæft fil</label>
    <input type="file" name="documentation" id="input-id" required multiple>
</fds-upload-file>

<fds-upload-file>
    <label class="fds-upload-label" for="input-id">Simpel vedhæft fil</label>
    <div class="fds-upload-dropzone">
        <input type="file" name="documentation" id="input-id" required="" multiple="" class="fds-upload-input" aria-describedby="dropzone-input-id">
        <div class="fds-upload-dropzone-content" id="dropzone-input-id">
            <svg class="icon-svg" aria-hidden="true"><use href="#plus-circle"></use></svg>
            <p>Træk dine filer herhen eller <span class="fds-upload-choose">vælg filer</span>
            </p>
        </div>
    </div>
</fds-upload-file>

Varianter

Hjælpetekst

<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.

Åbn i et nyt vindue

Med hjælp tekst

Kun PDF filer under 10MB

<fds-upload-file>
    <label>Med hjælp tekst</label>
    <fds-help-text id="helpf8570374">Kun PDF filer under 10MB</fds-help-text>
    <input type="file" name="documentation" required multiple id="input-id1">
</fds-upload-file>

<fds-upload-file>
    <label class="fds-upload-label" for="input-id1">Med hjælp tekst</label>
    <fds-help-text id="helpf8570374" class="help-text">Kun PDF filer under 10MB</fds-help-text>
    <div class="fds-upload-dropzone">
        <input type="file" name="documentation" required="" multiple="" id="input-id1" class="fds-upload-input" aria-describedby="dropzone-input-id1 helpf8570374">
        <div class="fds-upload-dropzone-content" id="dropzone-input-id1">
            <svg class="icon-svg" aria-hidden="true"><use href="#plus-circle"></use></svg>
            <p>Træk dine filer herhen eller <span class="fds-upload-choose">vælg filer</span>
            </p>
        </div>
    </div>
</fds-upload-file>

Attributter til `<fds-help-text>`

Attribut	Beskrivelse
id	Hvis ikke angivet, genereres der automatisk et id.
hidden	Styrer synligheden af hjælpeteksten.

Events fra `<fds-help-text>`

Event	Beskrivelse
help-text-callback	Afsender en hændelse til opdatering af forælderkomponenten.

Fejl

<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.

For at tilknytte en fejlbesked til en specifik fil skal du angive filens ID som anden parameter i addError() metoden. Når en fejl knyttes til en fil, vises fejlbeskeden direkte under den pågældende fil i fillisten, og filen markeres visuelt som ugyldig. Hvis fil-ID’et ikke angives, vises fejlen som en generel fejl for hele upload-komponenten.

Åbn i et nyt vindue

Vedhæft fil

Fejl tekst

<fds-upload-file upload-id="upload-id2">
    <label>Vedhæft fil</label>
    <input type="file" name="documentation" id="file-input-error-id" required multiple>
    <fds-error-message id="errord96834ae">Fejl tekst</fds-error-message>
</fds-upload-file>

<fds-upload-file upload-id="upload-id2">
    <label class="fds-upload-label" for="file-input-error-id">Vedhæft fil</label>
    <div class="fds-upload-dropzone">
        <input type="file" name="documentation" id="file-input-error-id" required="" multiple="" class="fds-upload-input" aria-describedby="dropzone-file-input-error-id errord96834ae" aria-invalid="true">
        <div class="fds-upload-dropzone-content" id="dropzone-file-input-error-id">
            <svg class="icon-svg" aria-hidden="true"><use href="#plus-circle"></use></svg>
            <p>Træk dine filer herhen eller <span class="fds-upload-choose">vælg filer</span>
            </p>
        </div>
    </div>
    <fds-error-message id="errord96834ae">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Fejl tekst</span>
    </fds-error-message>
</fds-upload-file>

Attributter til `<fds-error-message>`

Attribut	Beskrivelse
id	Hvis ikke angivet, genereres der automatisk et id.
icon-text	Sæt en anden tekst på fejlikonet.
hidden	Styrer synligheden af fejlmeddelelsen.

Events fra `<fds-error-message>`

Event	Beskrivelse
error-message-visibility-changed	Afsender en hændelse til forælderkomponenter, når synligheden ændres.
error-message-callback	Afsender en hændelse til opdatering af forælderkomponenten.

Deaktiveret

Åbn i et nyt vindue

Deaktiveret

<fds-upload-file>
    <label>Deaktiveret</label>
    <input type="file" name="documentation" id="upload-id3" required multiple disabled>
</fds-upload-file>

<fds-upload-file>
    <label class="fds-upload-label disabled" for="upload-id3">Deaktiveret</label>
    <div class="fds-upload-dropzone">
        <input type="file" name="documentation" id="upload-id3" required="" multiple="" disabled="" class="fds-upload-input" aria-describedby="dropzone-upload-id3">
        <div class="fds-upload-dropzone-content" id="dropzone-upload-id3">
            <svg class="icon-svg" aria-hidden="true"><use href="#plus-circle"></use></svg>
            <p>Træk dine filer herhen eller <span class="fds-upload-choose">vælg filer</span>
            </p>
        </div>
    </div>
</fds-upload-file>

Konfiguration

fds-upload-file

Attributter

Attribut	Beskrivelse
dropzone-prefix	Definerer den indledende tekst i dropzone-området før linkteksten. Indsæt en tekst i attributten for at overskrive default-teksten “Træk dine filer herhen eller”.
dropzone-suffix	Definerer teksten der vises efter linkteksten i dropzone-området. Attributten er tom som standard, men kan bruges til at tilføje yderligere instruktioner eller information.
dropzone-link	Definerer teksten for det klikkable link i dropzone-området. Indsæt en tekst i attributten for at overskrive default-teksten “vælg filer”.
file-list-header	Definerer overskriften der vises over listen af valgte filer. Indsæt en tekst i attributten for at overskrive default-teksten “Valgte filer”.
file-list-more	Definerer teksten på knappen til at vælge flere filer. Indsæt en tekst i attributten for at overskrive default-teksten “Vælg flere filer”.
remove-text	Definerer teksten på fjern-knappen for hver fil i listen. Indsæt en tekst i attributten for at overskrive default-teksten “Fjern”.

Funktioner

Funktion	Beskrivelse
getFiles()	Returnerer et array med alle valgte filer og deres tilknyttede ID’er. Hver fil returneres som et objekt med egenskaberne ‘id’ og ‘file’.
addError(message, fileId = null)	Tilføjer en fejlbesked til upload-komponenten. Hvis fileId angives, knyttes fejlen til den specifikke fil. Returnerer fejlelementet.
removeError(errorElement)	Fjerner det angivne fejlelement fra upload-komponenten .

fds-file-item

fds-file-item er en hjælpekomponent der bruges internt af fds-upload-file til at vise individuelle filer i fillisten. Hver gang en bruger vælger filer, opretter fds-upload-file automatisk fds-file-item elementer for hver fil.

Selvom fds-file-item kan bruges selvstændigt, er den primært designet til at fungere som en del af fds-upload-file økosystemet.

Attribut	Beskrivelse
remove-text	Definerer teksten på fjern-knappen for den enkelte fil. Indsæt en tekst i attributten for at overskrive default-teksten “Fjern”.

Funktioner

Funktion	Beskrivelse
setFileData()	Indstiller fildata og unikt ID for fil-elementet. Funktionen tager en fil-objekt og et ID som parametre og initialiserer komponenten med disse data.

Vælg et tema

Vedhæft fil

Sådan bruges komponenten

Anvendes til

Vejledning

Fejlmeddelelse

Se komponenten i eksempelløsninger

Installation

HTML Struktur

Om custom elements

HTML-muligheder

Eksempler

Vedhæft fil lavet med custom element

Varianter

Hjælpetekst

Attributter til <fds-help-text>

Events fra <fds-help-text>

Fejl

Attributter til <fds-error-message>

Events fra <fds-error-message>

Deaktiveret

Konfiguration

fds-upload-file

Attributter

Funktioner

fds-file-item

Funktioner

Attributter til `<fds-help-text>`

Events fra `<fds-help-text>`

Attributter til `<fds-error-message>`

Events fra `<fds-error-message>`