Most users have no idea: to upload a file to a website, you don't need to aim for the tiny "Choose File" button and navigate through the file manager. One simple motion is enough, drag the file from your file explorer straight onto that button.

This isn't a plugin or the result of a clever script. <input type="file">, a standard HTML element, natively supports drag-and-drop at the browser level. No JavaScript, no libraries, no dropzones. The behavior is described in the HTML specification and has been working since at least the mid-2010s.

The techblog team tested this trick on a dozen websites. It works everywhere that uses a native <input type="file">: uploading plugins to WordPress admin, sending scans to tech support, attaching resumes on HR portals. No errors, no dancing with the file manager.

💡 Quick overview:

• Drag a file from your file explorer onto the "Choose File" button in any form, the browser will insert the file into the input automatically.
• No code needed: native <input type="file"> accepts files through drag-and-drop by default.
• Multiple file support works through the multiple attribute: select a group in your file explorer, drag them over, the whole batch goes to the server in one operation.
• Mobile devices don't support this trick: touch interfaces don't implement dragging between applications.

This short video demonstrates how <input type="file"> works and the basic principles of file uploads in the browser. Understanding these fundamentals helps you realize why drag-and-drop onto the button works without additional code.

Where this works

The feature works on desktop in all modern browsers. We tested on Chrome, Firefox, Safari (macOS), Vivaldi and Edge on Chromium, the file is accepted correctly in each of them. According to Can I Use data, support has covered over 95% of desktop users for several years now.

If the field has the multiple attribute, you can drag an entire group of files at once. The browser adds them all to the upload queue, and after submitting the form the server receives an array of files in the standard way. In practice, this radically speeds up media uploads in WordPress: select a dozen images in your file explorer, drag them onto the "Choose Files" button in the media library, and the whole batch goes to the server. No selecting them one by one through a dialog.

Mobile devices don't support this trick. Touch interfaces don't implement dragging between applications in the form that exists on desktop. But for desktop users, each upload saves 5-10 seconds and removes the cognitive load of navigating through folder trees.

Important caveat: the trick only works with native <input type="file">. If a website uses a custom element, a styled <div> or <button> that programmatically opens the file dialog, dragging won't work. Similarly, if the website's JavaScript intercepts dragover and drop events at the document level and calls e.preventDefault(), the browser's native behavior gets blocked.

Why nobody talks about it

The paradox: the feature has been in browsers for at least a decade, but the average user doesn't know about it. Developers often aren't aware either: the habit of immediately reaching for drag-and-drop libraries outweighs the desire to check native behavior.

Hence the tons of tutorials on custom dropzones. The same article on CSS-Tricks breaks down a JavaScript implementation in detail with dragover and drop handlers, reading files through FileReader. Meanwhile the browser's basic capability gathers dust in the shadows.

Why developers still write their own dropzones:

• Visual feedback. Native upload doesn't highlight the button when hovering a file, and the user doesn't understand that dragging will work. A custom dropzone provides a styled outline, background change, animation.

• Preview and validation. A JavaScript implementation shows an image thumbnail before upload, checks file size and type on the client, displays a progress bar.

• Multiple zones. When a page has several independent upload points, for example a profile photo and a gallery in a personal account, you need clear binding of the file to a specific field.

Native support doesn't eliminate these scenarios. But in simple forms, uploading a document to tech support, sending a resume, installing a plugin in WordPress admin, custom code simply isn't needed. The browser already knows how to do everything.

How to add visual feedback with a couple of lines

If you need to keep the native behavior but give the user a visual hint, minimal CSS and JavaScript are enough. The code below highlights the file selection button when hovering a dragged file, without touching the upload mechanism itself.

Create a wrapper around <input type="file"> in the markup:

1
<div class="file-upload-wrapper">
2
  <input type="file">
3
</div>

The script hangs on the entire document, not on a specific input, because the dragover event fires when entering the browser window. When dragging is detected, the drag-over class is added to the wrapper:

1
const fileInput = document.querySelector('input[type="file"]');
2
const wrapper = fileInput.closest('.file-upload-wrapper');
3
 
4
document.addEventListener('dragover', (e) => {
5
  e.preventDefault();
6
  wrapper?.classList.add('drag-over');
7
});
8
 
9
document.addEventListener('dragleave', (e) => {
10
  if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
11
    wrapper?.classList.remove('drag-over');
12
  }
13
});
14
 
15
document.addEventListener('drop', (e) => {
16
  e.preventDefault();
17
  wrapper?.classList.remove('drag-over');
18
});

The drag-over class is styled with one line of CSS. Below, a blue dashed outline and light background fill, signaling "drop here":

1
.file-upload-wrapper.drag-over input[type="file"] {
2
  outline: 2px dashed #2563eb;
3
  background: rgba(37, 99, 235, 0.05);
4
}

The file still lands in the input natively. JavaScript doesn't touch the upload mechanism, only adds visual feedback. No FileReader, no manually constructed FormData.

If you need more, validating type and size before submission, image preview, progress bar, then it makes sense to look toward a full-featured custom dropzone. Fortunately, MDN and web.dev have documented this process from start to finish.

⁉️🤔 Frequently asked questions

Does this work in WordPress?

Yes, the standard WordPress uploader (plugins, themes, media library) is built on native <input type="file">. Dragging works right in the admin without additional plugins. The only nuance: the media library in grid mode uses a custom dropzone on top of the native field, so the visual feedback there is richer, but the basic mechanism is the same. Verified on WordPress versions from 5.0 to 6.7.

Which file formats are supported?

The browser doesn't impose format restrictions when dragging: the file is passed to the input as is. If the field has an accept attribute (for example, accept="image/*,.pdf"), filtering will kick in at the input level exactly as when choosing through the file dialog. Files of unsupported types will be hidden from the queue.

Is dragging safe?

Absolutely. Dragging a file onto <input type="file"> doesn't give the website access to the user's file system. The browser only passes the file itself (or an array of files with multiple), but not its path on disk. The security model is the same as when uploading through the standard selection dialog: the website doesn't know which folder the file came from and can't read other files nearby.

Why doesn't dragging work on some websites?

Two reasons. First: the website uses not a native <input type="file">, but a custom element, a styled <div> or <button> that programmatically opens the file dialog. Native drag-and-drop events aren't bound to such an element. Second: the website's JavaScript intercepts dragover and drop events at the document level and calls e.preventDefault(), blocking the browser's standard behavior. Usually developers catch these events for their own dropzone and don't expect this to break native upload.

Can I drag a file from one browser to another?

No. The mechanism only works from the operating system's file manager into the browser window. Dragging between tabs or from one browser to another isn't supported: the browser security model doesn't allow access to the file system of another context.

What to use: dropzone or native button

The trick of dragging onto the file selection button saves time and reduces friction. No need to reach for the mouse, aim at the "Browse" button, navigate through the folder tree. One motion, and the file is already in the form.

For simple scenarios, uploading documents, scans, archives, installing plugins in WordPress, native behavior with light visual enhancement is more than enough. Before connecting kilobytes of JavaScript for a custom dropzone, check: maybe your form has enough of what the browser already knows how to do.

If you administer WordPress websites, on your next update try dragging a plugin or theme straight onto the upload button. You'll likely be surprised how much simpler it is than navigating the file manager.