Опишіть алгоритм створення функціоналу, що забезпечує читання вмісту .txt-файлу при перетягуванні його з файлової системи у вікно браузера.

Повне пояснення

Що це і навіщо

• Drag & Drop + FileReader дозволяють користувачеві швидко завантажувати локальні файли без форм.

Ключові принципи

• dragover/drop‑події, event.preventDefault() для дозволу drop.
• FileReader.readAsText() повертає Promise‑подібний результат через onload.

Як це працює

1. Навешуємо dragover на контейнер: e.preventDefault().
2. Навешуємо drop: отримуємо event.dataTransfer.files[0].
3. Перевіряємо MIME‑тип або розширення (file.name.endsWith('.txt')).
4. Створюємо const reader = new FileReader();.
5. У reader.onload отримуємо reader.result – текст, і вставляємо у елемент.

Практика (JS/TS)

const dropZone = document.getElementById('drop') as HTMLElement;
dropZone.addEventListener('dragover', e => e.preventDefault());

dropZone.addEventListener('drop', async e => {
  e.preventDefault();
  const file = e.dataTransfer?.files[0];
  if (!file || !file.name.endsWith('.txt')) return;
  const reader = new FileReader();
  reader.onload = () => {
    document.getElementById('output')!.textContent = reader.result as string;
  };
  reader.readAsText(file);
});

Тестування – можна мокати FileReader у Jest, перевіряючи, що readAsText викликається з правильним файлом.

Безпека – обмежуємо типи файлів, не виконуючи код з файлу.

Оптимізація – для великих файлів можна використовувати readAsText з slice, але для звичайних .txt‑файлів це не критично.