При реализации формы с полем загрузки файлов хорошим тоном считается поддержка drag-and-drop, чтобы пользователь мог перетащить нужный файл из проводника в форму.

Часто размеры области, на которую нужно бросить перетаскиваемый файл, ограничивают:

Если поле загрузки файлов всего одно, такое ограничение обосновать сложно, а пользователю оно мешает: чем меньше доступная область, тем сложнее пользователю в неё попасть и тем проще промахнуться.

Более дружелюбный к пользователям подход — растянуть доступную для перетаскивания область на весь экран. Так, например, сделано в Амплифере и на ГитХабе:

Если полей для загрузки файлов на странице несколько (например, при загрузке сканов нескольких документов), доступную для перетаскивания область всё равно можно растянуть на весь экран и разделить на области для каждого поля. Скорее всего, эти области будут всё ещё достаточно большими.

Нюанс: перетаскивание текста

Чтобы при случайном или намеренном перетаскивании текста на странице не включалась полноэкранная область загрузки файлов, проверяйте тип содержимого в событиях перетаскивания:

function isFileDragEvent(event) {
  return event.dataTransfer.types.includes('Files');
}

document.addEventListener('dragenter', (event) => {
  if (!isFileDragEvent(event)) {
    return;
  }

  // ...
});