Bifoga fil

Tekniken för att bifoga fil (mozilla.org)

Vi sparar uppladdade filer i en lista som heter fileToBeUploadedList som inhåller alla fil som ska laddas upp. Input[type='file'] är ej redigerbar och drag and drop value sparas inte i den input elementet och darför behöver vi ha en array. Du kan bestämma själv hur du vill använda denna array för uppladdning, och om du vill / inte tomma / reinitiate Input[type='file'] fältet efter uppladdning. Du bestämmer också om du ska anvanda text grupp "Välj en fil eller dra hit filen" eller "Välj filer eller dra hit filer" eller något annat.

Bifoga en fil

Välj en fil eller dra hit filen

Visa kod

<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"><b> Välj en fil </b> eller dra hit filen</span>
    </label>
  </div>
</div>

Bifoga flera filer

Välj filer eller dra hit filer

Visa kod

<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"><b> Välj filer </b> eller dra hit filer</span>
    </label>
  </div>
</div>

Bifoga fil med hjälptext

Bifoga en fil Obligatorisk Lite hjälptext.

Välj en fil eller dra hit filen

Visa kod

<div class="c-file-upload" rel="c-file-upload-js">
  <label id="fileUpload_text_description" class="c-file-upload_title">Bifoga en fil
    <span class="label__tag-container">
      <span class="c-tag">Obligatorisk</span>
    </span>
    <span class="label__description">Lite hjälptext.</span>
  </label>
  <div class="upload-area">
    <input class="upload-area__input" type="file" name="files" aria-describedby="fileUpload_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"><b> Välj en fil </b> eller dra hit filen</span>
    </label>
  </div>
</div>