Bifoga fil

Du använder komponenten när du vill att användaren ska bifoga en fil.

Design och språk

Du ska ha en rubrik, det vill säga en etikett, ovanför komponenten så att användaren förstår vilken typ av fil du vill att hen ska bifoga. Rubriken kan till exempel vara Bifoga en fullmakt, eller Bifoga en faktura.

Hjälptext

Hjälptexten ska hjälpa användaren att välja rätt fil att bifoga.

I första hand ska du använda en så pass tydlig etikett så att en hjälptext inte behövs. Behöver du använda en hjälptext kan du välja mellan två varianter. Du ska använda samma variant i hela systemet och alltså inte blanda dem. Varianterna är:

  • Statisk hjälptext som visas hela tiden för användaren och sDet om används för korta hjälptexter.
  • Dynamisk hjälptext som är dold och visas först när användaren väljer att klicka på ikonen för hjälptext. Den dynamiska hjälptexten ska du använda vid långa hjälptexter.

Behöver du en hjälptext ska du i första hand välja den statiska hjälptexten. Hjälptexten ska vara trevlig men inte pratig. Texten ska vara kort men tillräckligt informativ för att användaren ska bli hjälpt av den. Meningarna i hjälptexten ska börja med stor bokstav och sluta med punkt. För att kunna skriva en bra hjälptext behöver du också förstå användarens behov.

Komponent och kod

Denna komponent kräver Javascript för att fungera.

Ladda upp en fil

<div class="c-file-upload" rel="c-file-upload-js">
  <label id="fileUpload_description" class="c-file-upload_title">Bifoga en fil</label>
  <div class="upload-area">
    <input class="upload-area__input" aria-describedby="fileUpload_description" type="file" name="files" id="fileUpload">
    <label for="fileUpload" class="upload-area__label">
      <span class="sjv-i-ladda-upp-fil"></span>
      <span class="upload-area__dragndrop"><strong> Välj en fil </strong> eller dra hit filen</span>
    </label>
  </div>
</div>

Ladda upp flera filer

<div class="c-file-upload" rel="c-file-upload-js">
  <label id="fileUpload2_description" class="c-file-upload_title">Bifoga flera filer</label>
  <div class="upload-area">
    <input class="upload-area__input" aria-describedby="fileUpload2_description" type="file" name="files2" id="fileUpload2" multiple="">
    <label for="fileUpload2" class="upload-area__label">
      <span class="sjv-i-ladda-upp-fil"></span>
      <span class="upload-area__dragndrop"><strong> Välj filer </strong> eller dra hit filer</span>
    </label>
  </div>
</div>

Statisk hjälptext

<div class="c-file-upload" rel="c-file-upload-js">
  <label id="fileUpload_statisk_text_description" class="c-file-upload_title">Bifoga en fil
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="label__description">Lite hjälptext.</span>
  </label>
  <div class="upload-area">
    <input class="upload-area__input" type="file" name="files" required="" aria-describedby="fileUpload_statisk_text_description" id="fileUpload_text">
    <label for="fileUpload_text" class="upload-area__label">
      <span class="sjv-i-ladda-upp-fil"></span>
      <span class="upload-area__dragndrop"><strong> Välj en fil </strong> eller dra hit filen</span>
    </label>
  </div>
</div>

Dynamisk hjälptext

<div class="c-file-upload" rel="c-file-upload-js">
  <label id="fileUpload_dynamisk_text_description" class="c-file-upload_title">Bifoga en fil
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <jv-help-text>Lite text med beskrivning för hur du ska besvara denna fråga och för
      att testa hur en
      lång beskrivning ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
    </jv-help-text>
  </label>
  <div class="upload-area">
    <input class="upload-area__input" type="file" name="files" required="" aria-describedby="fileUpload_dynamisk_text_description" id="fileUpload_text_dynamisk">
    <label for="fileUpload_text_dynamisk" class="upload-area__label">
      <span class="sjv-i-ladda-upp-fil"></span>
      <span class="upload-area__dragndrop"><strong> Välj en fil </strong> eller dra hit filen</span>
    </label>
  </div>
</div>

Valideringsfel

<div class="c-file-upload c-file-upload--error" rel="c-file-upload-js">
  <label id="fileUpload_text_description_error" class="c-file-upload_title">Bifoga en fil
    <span class="label__tag-container">
      <span class="label__required">*</span>
    </span>
    <span class="error"><span class="sjv-i-fel"></span>Det krävs en bifogad fil.</span>
  </label>
  <div class="upload-area">
    <input class="upload-area__input" type="file" name="files" required="" aria-describedby="fileUpload_text_description_error " id="fileUpload_text_error">
    <label for="fileUpload_text_error" class="upload-area__label">
      <span class="sjv-i-ladda-upp-fil"></span>
      <span class="upload-area__dragndrop"><strong> Välj en fil </strong> eller dra hit filen</span>
    </label>
  </div>
</div>

Inaktiverad

<div class="c-file-upload c-file-upload--disabeld" rel="c-file-upload-js">
  <label id="fileUpload_text_description_disabled" class="c-file-upload_title">Bifoga en fil
  </label>
  <div class="upload-area">
    <input class="upload-area__input" type="file" name="files" disabled="" aria-describedby="fileUpload_text_description_disabled " id="fileUpload_disabled">
    <label for="fileUpload_disabled" class="upload-area__label">
      <span class="sjv-i-ladda-upp-fil"></span>
      <span class="upload-area__dragndrop"><strong> Välj en fil </strong> eller dra hit filen</span>
    </label>
  </div>
</div>

Javascriptmetoder

init()
­Kör igång JavaScript koden för alla Bifoga fil-komponenter på den aktuella sidan.

initFileUpload(fileuploadElement: HTMLElement)
Kör igång JavaScript koden för ett specifikt Bifoga fil element.

clearAllUploadedFiles()­
Ta bort alla uppladdade filer på alla Bifoga fil-komponenter på den aktuella sidan.

Initiera JavaScript

Vill du köra JavaScript på Bifoga fil-komponenten och inte på andra komponenter så kan du använda koden nedan.

window.komponentbibliotek.fileUpload.init();

eller 

window.komponentbibliotek.fileUpload.initFileUpload(fileUploadHTMLElement);

--------------------------------------------------------------------------

Alla bifogade filer är sparat i en lista som heter fileTobeUploadedList

window.komponentbibliotek.fileUpload.fileTobeUploadedList;

Senast publicerad 2021-04-30

Sidansvarig för sidan är Styleguide