{{#> web/layout/default title="File Uploader" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Input</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div id="example-1" class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput" data-spirit-element="wrapper">
          <label for="file-uploader" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader"
            name="attachment1"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-single-file" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-single-file" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Input Multiple</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div
        id="example-multiple"
        class="FileUploader"
        data-spirit-toggle="fileUploader"
        data-spirit-message-maxfilesize="File too big!"
      >
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput" data-spirit-element="wrapper">
          <label for="file-uploader-multiple" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-multiple"
            name="attachment2"
            class="FileUploaderInput__input"
            multiple
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-multiple" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file(s)</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max size of each file is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-multiple-file" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-multiple-file" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Input Multiple with Validation</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div id="example-multiple-with-accept" class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput" data-spirit-element="wrapper">
          <label for="file-uploader-multiple-with-accept" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-multiple-with-accept"
            name="attachment3"
            class="FileUploaderInput__input"
            multiple
            data-spirit-element="input"
            accept=".png,image/jpeg"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-multiple-with-accept" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file(s)</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">
              Only JPG and PNG images are allowed. Max size of each file is 10 MB
            </div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-multiple-with-accept" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-multiple-with-accept" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Input Multiple with File Queue Behavior Control</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div id="example-example-with-dismissible" class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div
          class="FileUploaderInput"
          data-spirit-element="wrapper"
          data-spirit-file-queue-limit="2"
          data-spirit-queue-limit-behavior="hide"
        >
          <label for="file-uploader-with-dismissible" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-with-dismissible"
            name="attachment1"
            class="FileUploaderInput__input"
            multiple
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-dismissible" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file(s)</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max size of each file is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-multiple-with-file-queue-behavior" hidden>Attachments</h3>
        <ul
          class="FileUploaderList"
          aria-labelledby="attachments-multiple-with-file-queue-behavior"
          data-spirit-element="list"
        ></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Input Validation States</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput FileUploaderInput--success" data-spirit-element="wrapper">
          <label for="file-uploader-success" class="FileUploaderInput__label FileUploaderInput__label--required"
            >Label</label
          >
          <input
            type="file"
            id="file-uploader-success"
            name="attachment3"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-success" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
          <div class="FileUploaderInput__validationText">Success validation text</div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-success" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-success" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->

      <!-- FileUploader: start -->
      <div class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput FileUploaderInput--warning" data-spirit-element="wrapper">
          <label for="file-uploader-warning" class="FileUploaderInput__label FileUploaderInput__label--required"
            >Label</label
          >
          <input
            type="file"
            id="file-uploader-warning"
            name="attachment4"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-warning" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
          <div class="FileUploaderInput__validationText">Warning validation text</div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-warning" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-warning" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->

      <!-- FileUploader: start -->
      <div class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput FileUploaderInput--danger" data-spirit-element="wrapper">
          <label for="file-uploader-danger" class="FileUploaderInput__label FileUploaderInput__label--required"
            >Label</label
          >
          <input
            type="file"
            id="file-uploader-danger"
            name="attachment5"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-danger" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
          <div class="FileUploaderInput__validationText">
            <ul>
              <li>Danger validation text</li>
              <li>Another danger validation text</li>
            </ul>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-danger" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-danger" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Input Disabled</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput FileUploaderInput--disabled" data-spirit-element="wrapper">
          <label for="file-uploader-disabled" class="FileUploaderInput__label FileUploaderInput__label--required"
            >Label</label
          >
          <input
            type="file"
            id="file-uploader-disabled"
            name="attachment4"
            class="FileUploaderInput__input"
            disabled
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-disabled" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-disabled" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-disabled" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">
      Attachment
      <span class="Tag Tag--medium Tag--subtle Tag--warning">Visual demo only</span>
    </h2>

    <!-- ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE -->

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div class="FileUploader">
        <!-- FileUploaderList: start -->
        <h3 id="attachments-examples" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-examples" data-spirit-element="list">
          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">Document.pdf</span>
            </span>
            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->

          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <span class="FileUploaderAttachment__image">
              <img src="https://picsum.photos/id/823/162/162" alt="Image with a long name.jpg" />
            </span>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">Image with a long name.jpg</span>
            </span>
            <span class="FileUploaderAttachment__slot">
              <!-- Slot content: start -->
              <button type="button" class="FileUploaderAttachment__action">
                <span class="accessibility-hidden">Edit</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
                </svg>
              </button>
              <!-- Slot content: end -->
            </span>
            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->

          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <span class="FileUploaderAttachment__image">
              <img
                src="https://picsum.photos/id/823/130/162"
                alt="Contained image"
                style="--file-uploader-attachment-image-object-fit: contain"
              />
            </span>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">Contained image</span>
            </span>

            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->
        </ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Attachment with Image Preview</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- Modal: start -->
      <dialog id="example-image-preview" class="Modal" aria-labelledby="example-image-preview">
        <!-- ModalDialog: start -->
        <div class="ModalDialog ModalDialog--expandOnMobile">
          <!-- ModalBody: start -->
          <div class="ModalBody">
            <div class="pt-400 pt-tablet-600" data-example-content>
              <!-- here will be an image -->
            </div>
          </div>
          <!-- ModalBody: end -->

          <!-- ModalFooter: start -->
          <footer class="ModalFooter ModalFooter--right">
            <div class="ModalFooter__actions">
              <button
                type="button"
                class="Button Button--primary Button--medium"
                data-spirit-target="#example-image-preview"
                data-spirit-dismiss="modal"
              >
                Confirm
              </button>
              <button
                type="button"
                class="Button Button--secondary Button--medium"
                data-spirit-target="#example-image-preview"
                data-element="cancel"
              >
                Cancel
              </button>
            </div>
          </footer>
          <!-- ModalFooter: end -->
        </div>
        <!-- ModalDialog: end -->
      </dialog>
      <!-- Modal: end -->

      <!-- FileUploader: start -->
      <div id="example-custom-image-preview" class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item" data-spirit-imagePreview="true">
            <span class="FileUploaderAttachment__image">
              <img src="" width="54" height="54" alt="" />
            </span>
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <span class="FileUploaderAttachment__slot">
              <!-- Slot content: start -->
              <button type="button" class="FileUploaderAttachment__action" data-element="example-action">
                <span class="accessibility-hidden">Edit</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
                </svg>
              </button>
              <!-- Slot content: end -->
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput" data-spirit-element="wrapper">
          <label for="file-uploader-with-image-preview" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-with-image-preview"
            name="attachment12"
            class="FileUploaderInput__input"
            multiple
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-image-preview" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file(s)</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max size of each file is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-custom-image-preview" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-custom-image-preview" data-spirit-element="list"></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

  <script type="module">
    import Modal from '../../../js/Modal';
    import FileUploader from '../../../js/FileUploader';

    window.addEventListener('DOMContentLoaded', () => {
      let file;
      const ModalElement = document.getElementById('example-image-preview');
      const ModalInstance = new Modal(ModalElement);
      const Content = ModalElement.querySelector('[data-example-content]');
      const cancelButton = ModalElement.querySelector('[data-element="cancel"]');
      const FileUploaderElement = document.getElementById('example-custom-image-preview');
      const FileUploaderInstance = FileUploader.getInstance(FileUploaderElement);

      const isFileImage = (file) => file.type.split('/')[0] === 'image';

      const showModalPreview = (file) => {
        if (isFileImage(file)) {
          const reader = new FileReader();

          reader.readAsDataURL(file);
          reader.onloadend = () => {
            const base64data = reader.result;
            localStorage.setItem('image', base64data);
            Content.innerHTML = `<img src="${base64data}" style="width: 100%; height: auto" alt="${file.name}" />`;
            ModalInstance.show();
          };
        }
      };

      const removeFromQueue = () => {
        FileUploaderInstance.removeFromQueue(FileUploaderInstance.getUpdatedFileName(file.name));
        cleanup();
      };

      const cleanup = () => {
        ModalInstance.hide();
        Content.innerHTML = '';
        file = undefined;
      };

      cancelButton.addEventListener('click', removeFromQueue);
      FileUploaderElement.addEventListener('queuedFile.fileUploader', (event) => {
        file = event.currentFile;
        showModalPreview(file);
      });
    });
  </script>
</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Attachment with Custom Actions</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div id="example-custom-attachment-actions" class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <span class="FileUploaderAttachment__slot">
              <!-- Slot content: start -->
              <button type="button" class="FileUploaderAttachment__action" onclick="editHandler()">
                <span class="accessibility-hidden">Edit</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
                </svg>
              </button>
              <!-- Slot content: end -->
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput" data-spirit-element="wrapper">
          <label for="file-uploader-with-custom-attachment-actions" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-with-custom-attachment-actions"
            name="attachment2"
            class="FileUploaderInput__input"
            multiple
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-custom-attachment-actions" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file(s)</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max size of each file is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-custom-attachment-actions" hidden>Attachments</h3>
        <ul
          class="FileUploaderList"
          aria-labelledby="attachments-custom-attachment-actions"
          data-spirit-element="list"
        ></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

  <!-- Example custom action functionality: start -->
  <script>
    const editHandler = () => {
      alert('Custom action clicked');
    };
  </script>
  <!-- Example custom action functionality: end -->
</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">FileUploader with Meta Data</h2>

    <div class="docs-Stack docs-Stack--start">
      <!-- Modal: start -->
      <dialog id="example-modal-data" class="Modal" aria-labelledby="example-modal-data">
        <!-- ModalDialog: start -->
        <div class="ModalDialog ModalDialog--expandOnMobile">
          <!-- ModalBody: start -->
          <div class="ModalBody">
            <div class="pt-400 pt-tablet-600" data-example-content>
              <!-- here will be an image -->
            </div>
          </div>
          <!-- ModalBody: end -->

          <!-- ModalFooter: start -->
          <footer class="ModalFooter ModalFooter--right">
            <div class="ModalFooter__actions">
              <button
                type="button"
                class="Button Button--primary Button--medium"
                data-spirit-target="#example-modal-data"
                data-spirit-dismiss="modal"
              >
                Confirm
              </button>
              <button
                type="button"
                class="Button Button--secondary Button--medium"
                data-spirit-target="#example-modal-data"
                data-element="cancel"
              >
                Cancel
              </button>
            </div>
          </footer>
          <!-- ModalFooter: end -->
        </div>
        <!-- ModalDialog: end -->
      </dialog>
      <!-- Modal: end -->

      <!-- FileUploader: start -->
      <div id="example-custom-meta-data" class="FileUploader" data-spirit-toggle="fileUploader">
        <!-- FileUploaderAttachment template: start -->
        <template data-spirit-snippet="item">
          <li class="FileUploaderAttachment" data-spirit-populate-field="item" data-spirit-imagePreview="true">
            <span class="FileUploaderAttachment__image" data-spirit-element="attachment-image">
              <img src="" width="54" height="54" alt="" />
            </span>
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate" data-spirit-populate-field="name"></span>
            </span>
            <span class="FileUploaderAttachment__slot">
              <!-- Slot content: start -->
              <button type="button" class="FileUploaderAttachment__action" onclick="moduleFunctions.customEdit(event)">
                <span class="accessibility-hidden">Edit</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
                </svg>
              </button>
              <!-- Slot content: end -->
            </span>
            <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
        </template>
        <!-- FileUploaderAttachment template: end -->

        <!-- FileUploaderInput: start -->
        <div
          class="FileUploaderInput"
          data-spirit-element="wrapper"
          data-spirit-file-queue-limit="1"
          data-spirit-queue-limit-behavior="disable"
        >
          <label for="file-uploader-with-meta-data" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-with-meta-data"
            name="attachmentMetaData"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-meta-data" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file(s)</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max size of each file is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-uploader-with-meta-data" hidden>Attachments</h3>
        <ul
          class="FileUploaderList"
          id="file-uploader-list-with-meta-data"
          aria-labelledby="attachments-file-uploader-with-meta-data"
          data-spirit-element="list"
        ></ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
      <script>
        const moduleFunctions = {};
      </script>

      <script type="module">
        import Modal from '../../../js/Modal';
        import FileUploader from '../../../js/FileUploader';

        window.addEventListener('DOMContentLoaded', () => {
          let file;
          const ModalElement = document.getElementById('example-modal-data');
          const ModalInstance = new Modal(ModalElement);
          const Content = ModalElement.querySelector('[data-example-content]');
          const CancelButton = ModalElement.querySelector('[data-element="cancel"]');
          const FileUploaderElement = document.getElementById('example-custom-meta-data');
          const FileUploaderInstance = FileUploader.getInstance(FileUploaderElement);
          let toggleMetaData = false; // allow toggling meta data between two different values when clicking on edit button

          const isFileImage = (file) => file.type.split('/')[0] === 'image';

          // callbacks

          const updateQueueCallback = (key, file, meta) => {
            const attachmentElement = document.querySelector('#file-uploader-list-with-meta-data');
            const fileName = FileUploaderInstance.getUpdatedFileName(file.name);
            const metaInput = attachmentElement?.querySelector(`input[name="attachments_${fileName}_meta"]`);

            // if we have meta data update input if exist OR create new one if not exist
            if (meta) {
              if (metaInput) {
                metaInput.value = JSON.stringify(meta);
              } else {
                const attachmentMetaInputElement = document.createElement('input');
                attachmentMetaInputElement.setAttribute('type', 'hidden');
                attachmentMetaInputElement.setAttribute('name', `attachments_${fileName}_meta`);
                attachmentMetaInputElement.setAttribute('value', JSON.stringify(meta));
                attachmentElement?.appendChild(attachmentMetaInputElement);
              }
            }

            // remove input if exist AND we have no meta data
            if (!meta) {
              metaInput && metaInput.remove();
            }
          };

          const callbackOnDismiss = (key) => {
            document.querySelector(`input[name="attachments_${key}_meta"]`)?.remove();
          };

          // custom functions

          const customAddToQueue = (file, meta) => {
            if (isFileImage(file)) {
              const reader = new FileReader();

              reader.readAsDataURL(file);
              reader.onloadend = () => {
                const base64data = reader.result;
                localStorage.setItem('image', base64data);
                Content.innerHTML = `<img src="${base64data}" style="width: 100%; height: auto" alt="${file.name}" />`;
                ModalInstance.show();
              };
            }

            FileUploaderInstance.updateQueue(
              FileUploaderInstance.getUpdatedFileName(file.name),
              file,
              meta,
              updateQueueCallback,
            );
          };

          const customEdit = (event) => {
            const key = event.target.closest('li').id;
            const newMeta = toggleMetaData
              ? { x: 30, y: 30, cropWidth: 150, cropHeight: 150, originalWidth: 560, originalHeight: 330 }
              : { x: 22, y: 0, cropWidth: 110, cropHeight: 100, originalWidth: 560, originalHeight: 330 };
            toggleMetaData = !toggleMetaData;
            const file = FileUploaderInstance.getFileFromQueue(key).file;
            FileUploaderInstance.updateQueue(key, file, newMeta, updateQueueCallback);
          };
          moduleFunctions.customEdit = customEdit;

          // modal functions

          const removeFromQueue = () => {
            FileUploaderInstance.removeFromQueue(FileUploaderInstance.getUpdatedFileName(file.name));
            cleanup();
          };

          const cleanup = () => {
            ModalInstance.hide();
            Content.innerHTML = '';
            file = undefined;
          };

          CancelButton.addEventListener('click', removeFromQueue);

          FileUploaderElement.addEventListener('queuedFile.fileUploader', (event) => {
            file = event.currentFile;

            customAddToQueue(file);
          });

          FileUploaderElement.addEventListener('unqueuedFile.fileUploader', (event) => {
            callbackOnDismiss(event.currentFile);
          });

          FileUploaderElement.addEventListener('editFile.fileUploader', (event) => {
            customEdit(event.currentFile);
          });
        });
      </script>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">
    <h2 class="docs-Heading">
      Input with Attachment
      <span class="Tag Tag--medium Tag--subtle Tag--warning">Visual demo only</span>
    </h2>

    <!-- ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE -->

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div class="FileUploader">
        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput has-drag-and-drop" data-spirit-element="wrapper">
          <label for="file-uploader-with-attachments" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-with-attachments"
            name="attachment6"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-attachments" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-with-attachment" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-with-attachment" data-spirit-element="list">
          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">My resume.docx</span>
            </span>
            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->
        </ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->

      <!-- ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE -->

      <!-- FileUploader: start -->
      <div class="FileUploader">
        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput FileUploaderInput--danger has-drag-and-drop" data-spirit-element="wrapper">
          <label for="file-uploader-with-attachments-and-validation" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-with-attachments-and-validation"
            name="attachment7"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-attachments-and-validation" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
          <div class="FileUploaderInput__validationText">Danger validation text</div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-with-attachments" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-with-attachments" data-spirit-element="list">
          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">My resume.docx</span>
            </span>
            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->

          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">
                My resume with a name that is too long so it needs to be trimmed. You're not gonna see this part!.pdf
              </span>
            </span>
            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->
        </ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">
      Dragging not Available
      <span class="Tag Tag--medium Tag--subtle Tag--warning">Visual demo only</span>
    </h2>

    <!-- ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE -->

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div class="FileUploader">
        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput" data-spirit-element="wrapper">
          <label for="file-uploader-with-attachments" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-not-draggable"
            name="attachment8"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-with-attachments" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">
      Fluid Width
      <span class="Tag Tag--medium Tag--subtle Tag--warning">Visual demo only</span>
    </h2>

    <!-- ⚠️ VISUAL EXAMPLE ONLY, DO NOT COPY-PASTE -->

    <div class="docs-Stack docs-Stack--start">
      <!-- FileUploader: start -->
      <div class="FileUploader FileUploader--fluid">
        <!-- FileUploaderInput: start -->
        <div class="FileUploaderInput has-drag-and-drop" data-spirit-element="wrapper">
          <label for="file-uploader-fluid" class="FileUploaderInput__label">Label</label>
          <input
            type="file"
            id="file-uploader-fluid"
            name="attachment9"
            class="FileUploaderInput__input"
            data-spirit-element="input"
          />
          <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
            </svg>
            <label for="file-uploader-fluid" class="FileUploaderInput__dropZoneLabel">
              <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
              <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
            </label>
            <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
          </div>
        </div>
        <!-- FileUploaderInput: end -->

        <!-- FileUploaderList: start -->
        <h3 id="attachments-file-upload-fluid" hidden>Attachments</h3>
        <ul class="FileUploaderList" aria-labelledby="attachments-file-upload-fluid" data-spirit-element="list">
          <!-- FileUploaderAttachment: start -->
          <li class="FileUploaderAttachment">
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <span class="FileUploaderAttachment__name">
              <span class="text-truncate">My resume.docx</span>
            </span>
            <button type="button" class="FileUploaderAttachment__action">
              <span class="accessibility-hidden">Remove</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
              </svg>
            </button>
          </li>
          <!-- FileUploaderAttachment: end -->
        </ul>
        <!-- FileUploaderList: end -->
      </div>
      <!-- FileUploader: end -->
    </div>

  </div>

</section>
<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Example of JS-Controlled Form</h2>

    <div class="docs-Stack docs-Stack--start">
      <form name="example" id="form-example" method="post" enctype="multipart/form-data">
        <input type="hidden" name="hiddenField" value="hidden field value" />

        <!-- FileUploader: start -->
        <div id="example-composition" class="FileUploader" data-spirit-toggle="fileUploader">
          <!-- FileUploaderAttachment template: start -->
          <template data-spirit-snippet="item">
            <li class="FileUploaderAttachment" data-spirit-populate-field="item">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#file" />
              </svg>
              <span class="FileUploaderAttachment__name">
                <span class="text-truncate" data-spirit-populate-field="name"></span>
              </span>
              <button type="button" class="FileUploaderAttachment__action" data-spirit-populate-field="button">
                <span class="accessibility-hidden">Remove</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#close" />
                </svg>
              </button>
            </li>
          </template>
          <!-- FileUploaderAttachment template: end -->

          <!-- FileUploaderInput: start -->
          <div class="FileUploaderInput" data-spirit-element="wrapper" data-spirit-file-queue-limit="2">
            <label for="file-upload-in-form" class="FileUploaderInput__label">Label</label>
            <input
              type="file"
              id="file-upload-in-form"
              name="attachment10"
              class="FileUploaderInput__input"
              multiple
              data-spirit-element="input"
            />
            <div class="FileUploaderInput__dropZone" data-spirit-element="dropZone">
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
              </svg>
              <label for="file-uploader-in-form" class="FileUploaderInput__dropZoneLabel">
                <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>
                <span class="FileUploaderInput__dragAndDropLabel">or drag and drop here</span>
              </label>
              <div class="FileUploaderInput__helperText">Max file size is 10 MB</div>
            </div>
          </div>
          <!-- FileUploaderInput: end -->

          <!-- FileUploaderList: start -->
          <h3 id="attachments-composition" hidden>Attachments</h3>
          <ul class="FileUploaderList" aria-labelledby="attachments-composition" data-spirit-element="list"></ul>
          <!-- FileUploaderList: end -->
        </div>
        <!-- FileUploader: end -->

        <div class="mt-600">
          <button type="submit" class="Button Button--primary Button--medium">Submit me</button>
        </div>
      </form>
    </div>

  </div>

  <script type="module">
    import FileUploader from '../../../js/FileUploader';

    const form = document.querySelector('#form-example');
    const uploader = document.querySelector('#example-composition');
    const fileUploader = FileUploader.createInstance(uploader);

    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const formData = new FormData(form);
      console.log('form element', form);
      console.log('form data', formData);
      console.log('file queue', fileUploader.getFileQueue);

      // Clear after submit
      setTimeout(() => {
        fileUploader.clearFileQueue();
        console.log('file queue after submit', fileUploader.getFileQueue);
      }, 250);
    });
  </script>
</section>

{{/web/layout/default }}