File API

// Read text file content
document.getElementById('fileInput').addEventListener('change', (event) => {
  const file = event.target.files[0];
  
  if (!file) return;
  
  // Create FileReader
  const reader = new FileReader();
  
  // Set up onload handler
  reader.onload = (e) => {
    const text = e.target.result;
    console.log('File content:', text);
    document.getElementById('output').textContent = text;
  };
  
  // Read file as text
  reader.readAsText(file);
});

// HTML:
// <input type="file" id="fileInput" accept=".txt">
// <pre id="output"></pre>

// 🎯 FileReader methods:
// - readAsText() - Read as text
// - readAsDataURL() - Read as base64 (for images)
// - readAsArrayBuffer() - Read as binary data

// Preview image before upload
document.getElementById('imageInput').addEventListener('change', (event) => {
  const file = event.target.files[0];
  
  if (!file || !file.type.startsWith('image/')) {
    alert('Please select an image file');
    return;
  }
  
  const reader = new FileReader();
  
  reader.onload = (e) => {
    // e.target.result contains base64 image data
    const img = document.getElementById('preview');
    img.src = e.target.result;
    img.style.display = 'block';
  };
  
  // Read as data URL (base64)
  reader.readAsDataURL(file);
});

// HTML:
// <input type="file" id="imageInput" accept="image/*">
// <img id="preview" style="max-width: 300px; display: none;">

// 🎯 Common use: Profile picture upload with preview