---
status: beta
title: Attachment
desc: Attached files to messages or file type input.
ico: mdi:attachment
keywords:
  - file
  - upload

props:
  - class: .prs-attachment
    type: component
    desc: Container
  - class: .prs-thumb
    type: part
    desc: Thumbnail container (img, svg, iconify-icon)
  - class: .prs-meta
    type: part
    desc: Details container
  - class: .prs-name
    type: part
    desc: file name
  - class: .prs-ext
    type: part
    desc: file type/ext
  - class: .prs-close
    type: part
    desc: Close/remove button

controls:
  - name: name
    type: text
    label: File name
    desc: File name text.
    default: file_name.png

  - name: extension
    type: text
    label: Extension
    desc: File name extension text.
    default: image/png

  - name: thumbnail
    type: toggle
    label: Thumbnail
    desc: Use thumbnail instead of icon.
    default: true

  - name: withRemove
    type: toggle
    label: With remove
    desc: Show close/remove gadget.
    default: true

preview: |
  <div class="prs-attachment w-screen max-w-xs">
    <div class="prs-thumb">
      <svg x-show="!thumbnail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" fill="currentColor">
        <use href="/_assets/prs-icons.svg#content-type-blank-document"></use>
      </svg>
      <img x-show="thumbnail" src="https://placehold.net/4.png" alt="File thumbnail preview" />
    </div>
    <div class="prs-meta">
      <div class="prs-name" x-text="name.length ? name : 'file_name.png'"></div>
      <small class="prs-ext" x-text="extension"></small>
    </div>
    <button x-show="withRemove" class="prs-close"><iconify-icon icon="mdi:close" noobserver></iconify-icon></button>
  </div>

code:
  html: |
    <div class="prs-attachment">
      <div class="prs-thumb">{thumb}</div>
      <div class="prs-meta">
        <div class="prs-name">{name}</div>
        <small class="prs-ext">{ext}</small>
      </div>{close}
    </div>

  logic:
    close: "this.withRemove ? '\\n  <button class=\"prs-close\"><iconify-icon icon=\"mdi:close\" noobserver></iconify-icon></button>' : ''"
    name: "this.name"
    ext: "this.extension"
    thumb: "this.thumbnail ? '<img src=\"...\" alt=\"File thumbnail preview\" />' : '<svg width=\"24\" height=\"24\" role=\"img\" fill=\"currentColor\"><use href=\"/_assets/prs-icons.svg#content-type-blank-document\"></use></svg>'"
---