File Upload

<label for="fu-single-671" class="form-label">Attach invoice</label>
<input class="form-control" type="file" id="fu-single-671">

<label for="fu-multi-672" class="form-label">Project files</label>
<input class="form-control" type="file" id="fu-multi-672" multiple aria-describedby="fu-multi-help-673"> 
<div id="fu-multi-help-673" class="form-text">
  You can select up to 10 files.
</div>

<div class="row g-3">
  <div class="col-md-4">
    <label for="fu-img-674" class="form-label">Photo (JPG, PNG, WebP)</label>
    <input class="form-control" type="file" id="fu-img-674" accept="image/png, image/jpeg, image/webp">
  </div>
  <div class="col-md-4">
    <label for="fu-doc-675" class="form-label">Contract (PDF)</label>
    <input class="form-control" type="file" id="fu-doc-675" accept=".pdf,application/pdf">
  </div>
  <div class="col-md-4">
    <label for="fu-csv-676" class="form-label">Price list (CSV, XLSX)</label>
    <input class="form-control" type="file" id="fu-csv-676" accept=".csv,.xlsx">
  </div>
</div>

<label for="fu-sm-677" class="form-label small">Small</label>
<input class="form-control form-control-sm mb-4" type="file" id="fu-sm-677"> 
<label for="fu-lg-678" class="form-label">Large</label>
<input class="form-control form-control-lg" type="file" id="fu-lg-678">

<label for="fu-disabled-679" class="form-label">Attachments</label>
<input class="form-control" type="file" id="fu-disabled-679" disabled> 
<div class="form-text text-warning-emphasis">
  <i class="bi bi-exclamation-triangle" aria-hidden="true"></i> Storage is full - free up space to upload more.
</div>

<div class="tl-dropzone relative text-center p-6" data-demo-dropzone>
  <div class="text-3xl text-primary-ink">
    <i class="bi bi-cloud-arrow-up" aria-hidden="true"></i>
  </div>
  <p class="mb-1 font-semibold">Drag and drop files here</p>
  <p class="small text-muted mb-0">or click to browse</p>
  <label for="fu-drop-680" class="sr-only">Upload files</label>
  <input type="file" id="fu-drop-680" multiple class="absolute top-0 start-0 w-full h-full opacity-0" style="cursor: pointer;"> 
  <ul class="list-unstyled small mt-4 mb-0 text-start" data-demo-filelist>
  </ul>
</div>

<div class="tl-dropzone text-center px-4 py-12" data-demo-dropzone>
  <div class="display-6 text-muted mb-2">
    <i class="bi bi-images" aria-hidden="true"></i>
  </div>
  <h3 class="h6">Upload your ticket images</h3>
  <p class="small text-muted">PNG, JPG or GIF up to 10 MB each</p>
  <label for="fu-drop-lg-681" class="btn btn-primary"><i class="bi bi-folder2-open" aria-hidden="true"></i> Browse files</label>
  <input type="file" id="fu-drop-lg-681" class="sr-only" accept="image/*" multiple> 
  <ul class="list-group list-group-flush text-start mt-4 small" data-demo-filelist>
  </ul>
</div>

<div class="flex items-center gap-4">
  <img src="../assets/img/avatar-5.svg" alt="Mia Moreau" width="80" height="80" class="rounded-full border"> 
  <div>
    <div class="flex flex-wrap gap-2 mb-1">
      <label for="fu-avatar-682" class="btn btn-sm btn-primary"><i class="bi bi-camera" aria-hidden="true"></i> Upload new photo</label>
      <input type="file" id="fu-avatar-682" class="sr-only" accept="image/*"> 
      <button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
    </div>
    <div class="small text-muted">
      Square image, at least 400 x 400 px.
    </div>
  </div>
</div>

<ul class="list-group">
  <li class="list-group-item"><div class="flex items-center gap-2 mb-1"><span class="text-lg text-danger-emphasis"><i class="bi bi-file-earmark-pdf" aria-hidden="true"></i></span><span class="grow small font-semibold truncate">proposal-launch.pdf</span><span class="small text-muted"><i class="bi text-success-emphasis bi-check-circle-fill" aria-hidden="true"></i> Done</span></div><div class="progress" role="progressbar" aria-label="Upload progress for proposal-launch.pdf" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: .35rem;"><div class="progress-bar bg-success" style="width: 100%"></div></div></li>
  <li class="list-group-item"><div class="flex items-center gap-2 mb-1"><span class="text-lg text-info-emphasis"><i class="bi bi-file-earmark-image" aria-hidden="true"></i></span><span class="grow small font-semibold truncate">cover-photo.jpg</span><span class="small text-muted">56% of 4.1 MB</span></div><div class="progress" role="progressbar" aria-label="Upload progress for cover-photo.jpg" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100" style="height: .35rem;"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 56%"></div></div></li>
  <li class="list-group-item"><div class="flex items-center gap-2 mb-1"><span class="text-lg text-success-emphasis"><i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i></span><span class="grow small font-semibold truncate">budget-2027.xlsx</span><span class="small text-muted">10% of 860 KB</span></div><div class="progress" role="progressbar" aria-label="Upload progress for budget-2027.xlsx" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: .35rem;"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div></div></li>
</ul>

<label for="fu-ig-683" class="form-label">Import contacts</label>
<div class="input-group">
  <input type="file" class="form-control" id="fu-ig-683" accept=".csv,.vcf"> 
  <button class="btn btn-outline-primary" type="button"><i class="bi bi-upload" aria-hidden="true"></i> Upload</button>
</div>

<div class="card">
  <div class="card-body">
    <h3 class="h6"><i class="bi bi-file-earmark-text" aria-hidden="true"></i> Proof of address</h3>
    <ul class="small text-muted ps-4">
      <li>Utility bill or bank statement from the last 3 months</li>
      <li>Your full name and address must be visible</li>
      <li>PDF, JPG or PNG, max 5 MB</li>
    </ul>
    <label for="fu-id-doc-684" class="form-label small font-semibold">Choose document</label>
    <input type="file" class="form-control" id="fu-id-doc-684" accept=".pdf,image/*">
  </div>
</div>

<div class="tl-dropzone flex items-center gap-4 p-4 relative" data-demo-dropzone>
  <span class="text-xl text-primary-ink"><i class="bi bi-paperclip" aria-hidden="true"></i></span> 
  <div class="grow">
    <span class="font-semibold">Drop a file</span> <span class="text-muted small">or click to choose (max 2 MB)</span> 
    <ul class="list-unstyled small mb-0" data-demo-filelist>
    </ul>
  </div>
  <label for="fu-compact-685" class="sr-only">Choose file</label>
  <input type="file" id="fu-compact-685" class="absolute top-0 start-0 w-full h-full opacity-0" style="cursor: pointer;">
</div>

<div class="row row-cols-3 row-cols-sm-4 g-2">
  <div class="col">
    <div class="relative">
      <img src="https://images.unsplash.com/photo-1769798643655-e0f10f62c3fd?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery image 1" class="img-fluid rounded-md">
      <button type="button" class="btn btn-sm btn-light absolute top-0 end-0 m-1 py-0 px-1" aria-label="Remove image 1"><i class="bi bi-x" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="col">
    <div class="relative">
      <img src="https://images.unsplash.com/photo-1762968269894-1d7e1ce8894e?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery image 2" class="img-fluid rounded-md">
      <button type="button" class="btn btn-sm btn-light absolute top-0 end-0 m-1 py-0 px-1" aria-label="Remove image 2"><i class="bi bi-x" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="col">
    <div class="relative">
      <img src="https://images.unsplash.com/photo-1773828755374-0ee802d9f44b?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery image 3" class="img-fluid rounded-md">
      <button type="button" class="btn btn-sm btn-light absolute top-0 end-0 m-1 py-0 px-1" aria-label="Remove image 3"><i class="bi bi-x" aria-hidden="true"></i></button>
    </div>
  </div>
  <div class="col">
    <label for="fu-gallery-686" class="tl-add-tile flex flex-col items-center justify-center rounded-md h-full text-muted"><i class="bi bi-plus-lg" aria-hidden="true"></i><span class="small">Add</span></label>
    <input type="file" id="fu-gallery-686" class="sr-only" accept="image/*" multiple>
  </div>
</div>

<ul class="list-group">
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-primary-ink"><i class="bi bi-file-earmark-word" aria-hidden="true"></i></span><div class="grow min-w-0"><div class="small font-semibold truncate">brief-experience.docx</div><div class="small text-muted">184 KB - uploaded just now</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download brief-experience.docx"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete brief-experience.docx"><i class="bi bi-trash" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-warning-emphasis"><i class="bi bi-file-earmark-zip" aria-hidden="true"></i></span><div class="grow min-w-0"><div class="small font-semibold truncate">assets.zip</div><div class="small text-muted">12.8 MB - uploaded just now</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download assets.zip"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete assets.zip"><i class="bi bi-trash" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-danger-emphasis"><i class="bi bi-file-earmark-play" aria-hidden="true"></i></span><div class="grow min-w-0"><div class="small font-semibold truncate">walkthrough.mp4</div><div class="small text-muted">48.2 MB - uploaded 14 hours ago</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download walkthrough.mp4"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete walkthrough.mp4"><i class="bi bi-trash" aria-hidden="true"></i></button></li>
  <li class="list-group-item flex items-center gap-4"><span class="text-xl text-secondary"><i class="bi bi-file-earmark-code" aria-hidden="true"></i></span><div class="grow min-w-0"><div class="small font-semibold truncate">config.json</div><div class="small text-muted">6 KB - uploaded yesterday</div></div><button type="button" class="btn btn-sm btn-outline-secondary" aria-label="Download config.json"><i class="bi bi-download" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-outline-danger" aria-label="Delete config.json"><i class="bi bi-trash" aria-hidden="true"></i></button></li>
</ul>

<form class="row g-3">
  <div class="col-md-6">
    <label for="fu-cv-name-687" class="form-label">Full name</label>
    <input type="text" class="form-control" id="fu-cv-name-687" value="Mia Moreau">
  </div>
  <div class="col-md-6">
    <label for="fu-cv-email-688" class="form-label">Email</label>
    <input type="email" class="form-control" id="fu-cv-email-688" value="mia.moreau@example.com">
  </div>
  <div class="col-12">
    <label for="fu-cv-file-689" class="form-label">CV / resume <span class="text-danger-emphasis">*</span></label>
    <input type="file" class="form-control" id="fu-cv-file-689" accept=".pdf,.doc,.docx" required> 
    <div class="form-text">
      PDF or Word, max 5 MB.
    </div>
  </div>
  <div class="col-12">
    <label for="fu-cv-letter-690" class="form-label">Cover letter <span class="text-muted">(optional)</span></label>
    <input type="file" class="form-control" id="fu-cv-letter-690" accept=".pdf,.doc,.docx">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Apply as Data Analyst</button>
  </div>
</form>

<label for="fu-camera-691" class="btn btn-outline-primary w-full py-4"><i class="bi bi-camera-fill" aria-hidden="true"></i> Take a photo of your receipt</label>
<input type="file" id="fu-camera-691" class="sr-only" accept="image/*" capture="environment"> 
<p class="small text-muted mt-2 mb-0">On a computer this opens the normal file picker.</p>

<label for="fu-error-692" class="form-label">Logo</label>
<input type="file" class="form-control is-invalid" id="fu-error-692" accept="image/svg+xml,image/png"> 
<div class="invalid-feedback">
  <i class="bi bi-x-octagon" aria-hidden="true"></i> logo-final.png is 14 MB. The maximum size is 2 MB.
</div>

<div class="relative rounded-lg overflow-hidden">
  <img src="https://images.unsplash.com/photo-1769755409781-9e8924c57362?auto=format&fit=crop&w=1600&h=700&q=70" alt="Current cover image" class="w-full block object-cover" style="max-height: 14rem;"> 
  <div class="absolute bottom-0 end-0 m-4">
    <label for="fu-cover-693" class="btn btn-light btn-sm shadow-sm"><i class="bi bi-image" aria-hidden="true"></i> Change cover</label>
    <input type="file" id="fu-cover-693" class="sr-only" accept="image/*">
  </div>
</div>
<p class="small text-muted mt-2 mb-0">Recommended size 1600 x 700 px.</p>

<div class="card">
  <div class="card-header font-semibold">
    <i class="bi bi-filetype-csv" aria-hidden="true"></i> Import attendees
  </div>
  <div class="card-body">
    <label for="fu-import-694" class="form-label">CSV file</label>
    <input type="file" class="form-control mb-4" id="fu-import-694" accept=".csv,text/csv"> 
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="fu-import-header-695" checked>
      <label class="form-check-label" for="fu-import-header-695">First row contains column names</label>
    </div>
    <div class="form-check form-switch mb-4">
      <input class="form-check-input" type="checkbox" role="switch" id="fu-import-skip-696">
      <label class="form-check-label" for="fu-import-skip-696">Skip duplicates</label>
    </div>
    <label for="fu-import-sep-697" class="form-label">Separator</label>
    <select class="form-select w-auto" id="fu-import-sep-697">
      <option>Comma (,)</option>
      <option>Semicolon (;)</option>
      <option>Tab</option>
    </select>
  </div>
  <div class="card-footer text-end">
    <button type="button" class="btn btn-primary">Start import</button>
  </div>
</div>

<div class="p-4 rounded-lg bg-dark" data-ui-theme="dark">
  <div class="tl-dropzone text-center p-6 relative text-white" data-demo-dropzone>
    <div class="text-3xl">
      <i class="bi bi-music-note-beamed" aria-hidden="true"></i>
    </div>
    <p class="mb-0">Drop your audio files</p>
    <p class="small text-white/50 mb-0">MP3 or WAV</p>
    <label for="fu-dark-698" class="sr-only">Upload audio</label>
    <input type="file" id="fu-dark-698" accept="audio/*" multiple class="absolute top-0 start-0 w-full h-full opacity-0" style="cursor: pointer;"> 
    <ul class="list-unstyled small mt-2 mb-0" data-demo-filelist>
    </ul>
  </div>
</div>