Standard HTML5 file input:

<!-- Simple File Input -->
<div class="mb-3">
  <label class="form-label">Choose File</label>
  <input type="file" class="form-control" accept="image/*">
</div>

<!-- Multiple Files -->
<div class="mb-3">
  <label class="form-label">Multiple Files</label>
  <input type="file" class="form-control" multiple>
</div>

<!-- Specific File Types -->
<div class="mb-3">
  <label class="form-label">PDF Only</label>
  <input type="file" class="form-control" accept=".pdf">
</div>

HTML structure for drag and drop upload area:

<!-- Hidden Input -->
<input type="file" id="hidden-upload-1" class="d-none" multiple>

<!-- Upload Area -->
<div class="upload-area" onclick="document.getElementById('hidden-upload-1').click()">
  <div class="text-center">
    <i class="material-symbols-rounded icon-xl text-muted mb-2">cloud_upload</i>
    <p class="mb-1">Drag and drop files here</p>
    <small class="text-muted">or click to browse</small>
  </div>
</div>

JavaScript code for handling file uploads:

// Get upload area and hidden input
const uploadArea = document.querySelector('.upload-area');
const hiddenInput = document.getElementById('hidden-upload-1');

// Click to browse
uploadArea.addEventListener('click', () => {
  hiddenInput.click();
});

// Handle file selection
hiddenInput.addEventListener('change', function() {
  const files = this.files;
  if (files.length > 0) {
    handleFiles(files);
  }
});

// Drag and drop handlers
uploadArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', (e) => {
  e.preventDefault();
  uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', (e) => {
  e.preventDefault();
  uploadArea.classList.remove('dragover');
  
  const files = e.dataTransfer.files;
  if (files.length > 0) {
    handleFiles(files);
  }
});

// Process files
function handleFiles(files) {
  Array.from(files).forEach(file => {
    // Add file validation, preview, and upload logic here
  });
}

Progress indicator for file uploads:

<div class="upload-item">
  <div class="d-flex align-items-center">
    <img src="file-icon.png" alt="File" class="upload-icon">
    <div class="flex-grow-1 ms-3">
      <h6 class="mb-0">document.pdf</h6>
      <small class="text-muted">2.5 MB</small>
    </div>
    <span class="upload-status">Uploading...</span>
  </div>
  <div class="progress mt-2">
    <div class="progress-bar" role="progressbar" 
         style="width: 0%"></div>
  </div>
</div>