File Input

<wa-file-input label="Select a file"></wa-file-input>

<wa-file-input label="Upload your resume"></wa-file-input>

<wa-file-input label="Profile photo" hint="Upload a photo to personalize your account."></wa-file-input>

<wa-file-input label="Upload documents" hint="You can select multiple files at once." multiple></wa-file-input>

<wa-file-input
  label="Upload an image"
  hint="Only JPEG, PNG, GIF, and WebP images are allowed."
  accept="image/jpeg, image/png, image/gif, image/webp"
></wa-file-input>

<wa-file-input label="Upload a document" hint="PDF and Word documents only." accept=".pdf, .doc, .docx"></wa-file-input>

<wa-file-input
  label="Take a photo"
  hint="Opens the rear-facing camera on supported mobile devices."
  accept="image/*"
  capture="environment"
></wa-file-input>

<wa-file-input label="Upload disabled" disabled></wa-file-input>

<wa-file-input label="Extra Small" size="xs"></wa-file-input>
<br />
<wa-file-input label="Small" size="s"></wa-file-input>
<br />
<wa-file-input label="Medium" size="m"></wa-file-input>
<br />
<wa-file-input label="Large" size="l"></wa-file-input>
<br />
<wa-file-input label="Extra Large" size="xl"></wa-file-input>

<wa-file-input label="Upload files" multiple>
  <div slot="dropzone" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
    <wa-icon name="cloud-arrow-up" style="font-size: 2.5rem;"></wa-icon>
    <strong>Drag and drop your files here</strong>
    <span style="color: var(--wa-color-neutral-on-quiet);">or click to browse</span>
  </div>
</wa-file-input>

<wa-file-input
  id="file-input-demo"
  label="Select some files"
  hint="Try the buttons below after selecting files."
  multiple
></wa-file-input>

<br />

<wa-button id="reverse-btn" appearance="filled">Reverse Order</wa-button>
<wa-button id="clear-btn" appearance="filled">Clear All</wa-button>
<wa-button id="log-btn" appearance="filled">Log Files</wa-button>

<script>
  const fileInput = document.getElementById('file-input-demo');
  const reverseBtn = document.getElementById('reverse-btn');
  const clearBtn = document.getElementById('clear-btn');
  const logBtn = document.getElementById('log-btn');

  reverseBtn.addEventListener('click', () => {
    fileInput.files = fileInput.files.toReversed();
  });

  clearBtn.addEventListener('click', () => {
    fileInput.files = [];
  });

  logBtn.addEventListener('click', () => {
    console.log('Selected files:', fileInput.files);
  });
</script>

<form id="upload-form" method="post" enctype="multipart/form-data" action="about:blank">
  <wa-file-input name="documents" label="Select files to upload" multiple></wa-file-input>
  <br />
  <wa-button appearance="filled" type="submit" variant="brand">Upload</wa-button>
</form>

<script>
  const form = document.getElementById('upload-form');

  form.addEventListener('submit', event => {
    event.preventDefault();
    const formData = new FormData(form);
    console.log('Files to upload:', [...formData.getAll('documents')]);
  });
</script>

<form id="required-form" action="about:blank" method="get">
  <wa-file-input name="file" label="Required file" hint="You must select a file to submit." required></wa-file-input>
  <br />
  <wa-button appearance="filled" type="submit" variant="brand">Submit</wa-button>
  <wa-button type="reset" appearance="filled">Reset</wa-button>
</form>

<form id="custom-validation-form" action="about:blank" method="get">
  <wa-file-input
    id="custom-file-input"
    name="file"
    label="Upload a small file"
    hint="Files must be smaller than 500 KB."
  ></wa-file-input>
  <br />
  <wa-button appearance="filled" type="submit" variant="brand">Submit</wa-button>
  <wa-button type="reset" appearance="filled">Reset</wa-button>
</form>

<script type="module">
  const form = document.getElementById('custom-validation-form');
  const fileInput = document.getElementById('custom-file-input');
  const maxSize = 500 * 1024; // 500 KB

  fileInput.addEventListener('change', () => {
    const tooLarge = fileInput.files.some(file => file.size > maxSize);

    if (tooLarge) {
      fileInput.setCustomValidity('One or more files exceed the 500 KB limit.');
    } else {
      fileInput.setCustomValidity('');
    }
  });

  // Don't actually submit in the demo
  form.addEventListener('submit', event => {
    event.preventDefault();
  });
</script>

<form id="styling-form" action="about:blank" method="get" class="validation-styles">
  <wa-file-input name="file" label="Select a file" required></wa-file-input>
  <br />
  <wa-button appearance="filled" type="submit" variant="brand">Submit</wa-button>
  <wa-button type="reset" appearance="filled">Reset</wa-button>
</form>

<style>
  .validation-styles wa-file-input:state(user-valid) {
    outline: solid 2px var(--wa-color-success-fill-loud);
    outline-offset: 0.5rem;
  }

  .validation-styles wa-file-input:state(user-invalid) {
    outline: solid 2px var(--wa-color-danger-fill-loud);
    outline-offset: 0.5rem;
  }
</style>

<wa-file-input class="drag-styles" label="Watch the border change while dragging" multiple></wa-file-input>

<style>
  .drag-styles::part(dropzone) {
    transition: transform 0.2s ease;
  }

  .drag-styles:state(dragging)::part(dropzone) {
    transform: scale(1.02);
  }
</style>