File Input With Preview

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label for="file-upload-preview" class="block text-sm font-medium text-gray-700 mb-2">Upload with preview</label>
    <input 
      id="file-upload-preview" 
      type="file"
      accept="image/*"
      class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-md file:border-0
        file:text-sm file:font-semibold
        file:bg-blue-50 file:text-blue-700
        hover:file:bg-blue-100
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" />
    <p class="mt-1.5 text-xs text-gray-500">Select an image to preview</p>
    
    <!-- Preview container -->
    <div id="preview-container" class="mt-4 hidden">
      <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
        <img id="image-preview" src="#" alt="Image Preview" class="w-full h-full object-contain" />
      </div>
      <div class="mt-2 flex items-center justify-between">
        <span id="file-name" class="text-sm text-gray-500"></span>
        <button 
          id="remove-file" 
          type="button" 
          class="text-sm text-red-600 hover:text-red-800">
          Remove
        </button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const fileInput = document.getElementById('file-upload-preview');
      const previewContainer = document.getElementById('preview-container');
      const imagePreview = document.getElementById('image-preview');
      const fileName = document.getElementById('file-name');
      const removeButton = document.getElementById('remove-file');
      
      fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
          const file = this.files[0];
          const reader = new FileReader();
          
          reader.onload = function(e) {
            imagePreview.src = e.target.result;
            fileName.textContent = file.name;
            previewContainer.classList.remove('hidden');
          };
          
          reader.readAsDataURL(file);
        }
      });
      
      removeButton.addEventListener('click', function() {
        fileInput.value = '';
        previewContainer.classList.add('hidden');
        imagePreview.src = '#';
        fileName.textContent = '';
      });
    });
  </script>
</section>