File Upload - JavaScript

File Upload

Struktur HTML


<div class="ina-file-upload">
  <div class="ina-file-upload__label">Upload File</div>
  <div class="ina-file-upload__dropzone" role="button" tabindex="0">
    <input type="file" class="ina-file-upload__input" aria-label="Upload file" />
    <div class="ina-file-upload__content">
      <div class="ina-file-upload__icon">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="17 8 12 3 7 8"></polyline>
          <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
      </div>
      <div class="ina-file-upload__text">
        <div class="ina-file-upload__title">Unggah File</div>
        <div class="ina-file-upload__description">
          Unggah atau seret dan lepas ke dalam kotak ini.
        </div>
      </div>
      <button type="button" class="ina-file-upload__button">Pilih File</button>
    </div>
  </div>
</div>

Contoh Penggunaan

Contoh 1 - Multiple Files

Upload Multiple Files

Unggah File

Unggah atau seret dan lepas ke dalam kotak ini.

<div style="padding: 20px; max-width: 800px">
  <div class="ina-file-upload" id="file-upload-multiple">
    <div class="ina-file-upload__label">Upload Multiple Files</div>
    <div
      class="ina-file-upload__dropzone"
      id="file-upload-multiple-dropzone"
      role="button"
      tabindex="0"
    >
      <input
        type="file"
        class="ina-file-upload__input"
        id="file-upload-multiple-input"
        multiple
        aria-label="Upload files"
      />
      <div class="ina-file-upload__content">
        <div class="ina-file-upload__icon">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
          </svg>
        </div>
        <div class="ina-file-upload__text">
          <div class="ina-file-upload__title">Unggah File</div>
          <div class="ina-file-upload__description">
            Unggah atau seret dan lepas ke dalam kotak ini.
          </div>
        </div>
        <button type="button" class="ina-file-upload__button" id="file-upload-multiple-button">
          Pilih File
        </button>
      </div>
    </div>
    <div class="ina-file-upload__files" id="file-upload-multiple-files" style="display: none">
      <!-- Files will be populated by JavaScript -->
    </div>
  </div>
</div>

Contoh 2 - Max Size

Upload File (Max 5MB)

Unggah File

Unggah atau seret dan lepas ke dalam kotak ini.

<div style="padding: 20px; max-width: 800px">
  <div class="ina-file-upload" id="file-upload-max-size" data-max-size="5242880">
    <div class="ina-file-upload__label">Upload File (Max 5MB)</div>
    <div
      class="ina-file-upload__dropzone"
      id="file-upload-max-size-dropzone"
      role="button"
      tabindex="0"
    >
      <input
        type="file"
        class="ina-file-upload__input"
        id="file-upload-max-size-input"
        multiple
        aria-label="Upload files"
      />
      <div class="ina-file-upload__content">
        <div class="ina-file-upload__icon">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
          </svg>
        </div>
        <div class="ina-file-upload__text">
          <div class="ina-file-upload__title">Unggah File</div>
          <div class="ina-file-upload__description">
            Unggah atau seret dan lepas ke dalam kotak ini.
          </div>
        </div>
        <button type="button" class="ina-file-upload__button" id="file-upload-max-size-button">
          Pilih File
        </button>
      </div>
    </div>
    <div class="ina-file-upload__files" id="file-upload-max-size-files" style="display: none">
      <!-- Files will be populated by JavaScript -->
    </div>
  </div>
</div>

Contoh 3 - PDF Only

Upload PDF

Unggah File

Unggah atau seret dan lepas ke dalam kotak ini.

<div style="padding: 20px; max-width: 800px">
  <div class="ina-file-upload" id="file-upload-pdf-only" data-allowed-extensions="pdf">
    <div class="ina-file-upload__label">Upload PDF</div>
    <div
      class="ina-file-upload__dropzone"
      id="file-upload-pdf-only-dropzone"
      role="button"
      tabindex="0"
    >
      <input
        type="file"
        class="ina-file-upload__input"
        id="file-upload-pdf-only-input"
        accept="application/pdf"
        multiple
        aria-label="Upload PDF files"
      />
      <div class="ina-file-upload__content">
        <div class="ina-file-upload__icon">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
          </svg>
        </div>
        <div class="ina-file-upload__text">
          <div class="ina-file-upload__title">Unggah File</div>
          <div class="ina-file-upload__description">
            Unggah atau seret dan lepas ke dalam kotak ini.
          </div>
        </div>
        <button type="button" class="ina-file-upload__button" id="file-upload-pdf-only-button">
          Pilih File
        </button>
      </div>
    </div>
    <div class="ina-file-upload__files" id="file-upload-pdf-only-files" style="display: none">
      <!-- Files will be populated by JavaScript -->
    </div>
  </div>
</div>

Contoh 4 - Single File Upload Basic

<div style="padding: 20px; max-width: 800px">
  <div class="ina-single-file-upload" id="single-file-upload-basic">
    <input
      type="file"
      class="ina-single-file-upload__input"
      id="single-file-upload-basic-input"
      aria-label="Upload file"
    />
    <div
      class="ina-single-file-upload__container"
      id="single-file-upload-basic-container"
      role="button"
      tabindex="0"
      aria-label="Upload file"
    >
      <!-- Content will be populated by JavaScript -->
    </div>
  </div>
</div>

Contoh 5 - Single File Upload Disabled

<div style="padding: 20px; max-width: 800px">
  <div class="ina-single-file-upload" id="single-file-upload-disabled">
    <input
      type="file"
      class="ina-single-file-upload__input"
      id="single-file-upload-disabled-input"
      aria-label="Upload file"
      disabled
    />
    <div
      class="ina-single-file-upload__container ina-single-file-upload__container--disabled"
      id="single-file-upload-disabled-container"
      role="button"
      tabindex="-1"
      aria-disabled="true"
      aria-label="Upload file"
    >
      <!-- Content will be populated by JavaScript -->
    </div>
  </div>
</div>