---
title: File
desc: Form field input type for uploading files to a web server.
ico: mdi:file-upload
keywords:
  - attachment
  - form
  - input
  - upload

props:
  - class: .prs-file
    type: component
    desc: Container

alert:
  ico: mdi:warning
  body: |
    **Note:**  
    This is a modifier of **.prs-input**. Please use [input](../input/) properties and then stack **.prs-file**. Use this alongside the [attachment](../attachment/) component.

controls:
  - name: variant
    type: radio
    label: Variant
    desc: Ghost is border-less and background-less. Alternate display for extreme cases.
    default: default
    options:
      - default
      - ghost

  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup. We do include classes to force hover and focus states but you should avoid using those classes in your application.
    default: default
    options:
      - default
      - hover
      - focus
      - disabled

preview: |
  <div x-data="fileUpload()" class="w-screen max-w-md">
    <div class="prs-form-control">
      <input @change="handleFiles" x-ref="fileInput" type="file" id="preview-file" class="prs-input prs-file" :class="{
        'prs-input-ghost': variant === 'ghost',
        'prs-input_hover': state === 'hover',
        'prs-input_focus': state === 'focus',
      }" :disabled="state === 'disabled'" multiple />
    </div>
    <div x-show="files.length" x-transition class="py-3 grid grid-cols-[repeat(auto-fit,minmax(12.5rem,1fr))] gap-3">
      <template x-for="(file, index) in files" :key="file.name" hidden>
        <div class="prs-attachment">
          <div class="prs-thumb"><svg width="24" height="24" role="img" fill="currentColor"><use href="/_assets/prs-icons.svg#content-type-blank-document"></use></svg></div>
          <div class="prs-meta">
            <div class="prs-name" x-text="file.name"></div>
            <small class="prs-ext" x-text="file.type"></small>
          </div>
          <button @click="removeFile(index)" class="prs-close"><iconify-icon icon="mdi:close" noobserver></iconify-icon></button>
        </div>
      </template>
    </div>
  </div>

code:
  html: |
    <input type="file" id="UNIQUE_ID" class="prs-input prs-file{variant}{hover}{focus}"{disabled} />
  logic:
    variant: "this.variant !== 'default' ? (' prs-input-'+ this.variant) : ''"
    hover: "this.state === 'hover' ? ' prs-input_hover' : ''"
    focus: "this.state === 'focus' ? ' prs-input_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"
---