When implementing a form with a file upload field, it is a good practice to support drag and drop gesture from files to form.

Usually, the size of the drop area is limited:

If there is only one file upload field, this restriction is hard to justify, and it can be disturbing for users: the smaller the available area is, the harder it is for a user to aim at it.

A more user-friendly approach is to stretch the drop area to the viewport. For example, such approach is used on GitHub and Amplifr:

If there are several file upload fields on a page (for example, when uploading scans of several documents is required), the drop area can still be stretched to the viewport and split into parts for each field. These areas will still be large enough.

Don’t show drop area when dragging text

To prevent showing drop area on accidental or intentional text dragging, check that drag events includes files:

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

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

  // ...
});