La plupart des utilisateurs l’ignorent: pour envoyer un fichier sur un site, il n’est pas nécessaire de viser le petit bouton «Choisir un fichier» et de naviguer dans l’explorateur de fichiers. Un seul geste suffit: faites glisser le fichier depuis votre explorateur directement sur ce bouton.

Il ne s’agit pas d’un plugin ni du résultat d’un script astucieux. <input type="file">, un élément HTML standard, prend en charge nativement le glisser-déposer au niveau du navigateur. Pas de JavaScript, pas de bibliothèque, pas de zones de dépôt. Ce comportement est décrit dans la spécification HTML et fonctionne au moins depuis le milieu des années 2010.

L’équipe du blog technique a testé cette astuce sur une douzaine de sites. Cela fonctionne partout où un <input type="file"> natif est utilisé: envoi de plugins dans l’administration WordPress, envoi de scans au support technique, dépôt de CV sur des portails RH. Aucune erreur, pas de valse avec l’explorateur de fichiers.

💡 Aperçu rapide:

• Faites glisser un fichier depuis votre explorateur sur le bouton «Choisir un fichier» dans n’importe quel formulaire, le navigateur insère automatiquement le fichier dans l’input.
• Aucun code nécessaire: un <input type="file"> natif accepte les fichiers par glisser-déposer par défaut.
• La prise en charge de fichiers multiples fonctionne via l’attribut multiple: sélectionnez un groupe dans votre explorateur, faites-le glisser, l’ensemble est envoyé au serveur en une seule opération.
• Les appareils mobiles ne prennent pas en charge cette astuce: les interfaces tactiles n’implémentent pas le glisser-déposer entre applications.

Cette courte vidéo montre comment <input type="file"> fonctionne ainsi que les principes de base de l’envoi de fichiers dans le navigateur. Comprendre ces fondamentaux vous aide à réaliser pourquoi le glisser-déposer sur le bouton fonctionne sans code supplémentaire.

Où cela fonctionne

La fonctionnalité est opérationnelle sur ordinateur de bureau dans tous les navigateurs modernes. Nous avons testé sur Chrome, Firefox, Safari (macOS), Vivaldi et Edge sous Chromium, le fichier est correctement accepté dans chacun d’eux. Selon les données de Can I Use, la prise en charge couvre plus de 95% des utilisateurs desktop depuis plusieurs années.

Si le champ possède l’attribut multiple, vous pouvez faire glisser tout un groupe de fichiers d’un seul coup. Le navigateur les ajoute tous à la file d’envoi et, après soumission du formulaire, le serveur reçoit un tableau de fichiers de manière standard. En pratique, cela accélère radicalement les envois de médias dans WordPress: sélectionnez une douzaine d’images dans votre explorateur, faites-les glisser sur le bouton «Choisir des fichiers» de la médiathèque, et l’ensemble part vers le serveur. Fini la sélection un par un via une boîte de dialogue.

Les appareils mobiles ne prennent pas en charge cette astuce. Les interfaces tactiles n’implémentent pas le glisser-déposer entre applications sous la forme qui existe sur desktop. Mais pour les utilisateurs desktop, chaque envoi fait gagner 5 à 10 secondes et supprime la charge cognitive liée à la navigation dans les arborescences de dossiers.

Mise en garde importante: l’astuce ne fonctionne qu’avec un <input type="file"> natif. Si un site utilise un élément personnalisé, une <div> ou un <button> stylisé qui ouvre la boîte de dialogue de fichier par programmation, le glisser-déposer ne fonctionnera pas. De même, si le JavaScript du site intercepte les événements dragover et drop au niveau du document et appelle e.preventDefault(), le comportement natif du navigateur est bloqué.

Pourquoi personne n’en parle

Le paradoxe: la fonctionnalité est présente dans les navigateurs depuis au moins une décennie, mais l’utilisateur moyen ne la connaît pas. Les développeurs ne sont souvent pas au courant non plus: l’habitude de se tourner immédiatement vers des bibliothèques de glisser-déposer l’emporte sur l’envie de vérifier le comportement natif.

D’où les tonnes de tutoriels sur les zones de dépôt personnalisées. Le même article sur CSS-Tricks détaille une implémentation JavaScript avec des gestionnaires dragover et drop, lisant les fichiers via FileReader. Pendant ce temps, la capacité de base du navigateur prend la poussière dans l’ombre.

Pourquoi les développeurs écrivent-ils encore leurs propres zones de dépôt:

• Retour visuel. L’envoi natif ne met pas le bouton en surbrillance au survol d’un fichier, et l’utilisateur ne comprend pas que le glisser fonctionnera. Une zone de dépôt personnalisée fournit un contour stylisé, un changement de fond, une animation.

• Aperçu et validation. Une implémentation JavaScript affiche une vignette de l’image avant l’envoi, vérifie la taille et le type de fichier côté client, affiche une barre de progression.

• Zones multiples. Lorsqu’une page comporte plusieurs points d’envoi indépendants, par exemple une photo de profil et une galerie dans un espace personnel, vous avez besoin d’une liaison claire du fichier à un champ spécifique.

La prise en charge native n’élimine pas ces scénarios. Mais dans les formulaires simples, envoyer un document au support technique, déposer un CV, installer un plugin dans l’administration WordPress, le code personnalisé n’est tout simplement pas nécessaire. Le navigateur sait déjà tout faire.

Comment ajouter un retour visuel en quelques lignes

Si vous avez besoin de conserver le comportement natif tout en donnant un indice visuel à l’utilisateur, un minimum de CSS et de JavaScript suffit. Le code ci-dessous met en surbrillance le bouton de sélection de fichier au survol d’un fichier glissé, sans toucher au mécanisme d’envoi lui-même.

Créez un conteneur autour du <input type="file"> dans le balisage:

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

Le script s’accroche au document entier, pas à un input spécifique, car l’événement dragover se déclenche à l’entrée dans la fenêtre du navigateur. Lorsque le glisser est détecté, la classe drag-over est ajoutée au conteneur:

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
});

La classe drag-over est stylisée avec une ligne de CSS. Ci-dessous, un contour en pointillés bleu et un léger remplissage de fond, signalant «déposez ici»:

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

Le fichier atterrit toujours dans l’input de manière native. Le JavaScript ne touche pas au mécanisme d’envoi, il ajoute seulement un retour visuel. Pas de FileReader, pas de FormData construit manuellement.

Si vous avez besoin de plus, valider le type et la taille avant soumission, aperçu de l’image, barre de progression, alors il est pertinent de s’orienter vers une zone de dépôt personnalisée complète. Heureusement, MDN et web.dev ont documenté ce processus de bout en bout.

⁉️🤔 Foire aux questions

Cela fonctionne-t-il dans WordPress?

Oui, l’uploader standard de WordPress (plugins, thèmes, médiathèque) est construit sur un <input type="file"> natif. Le glisser-déposer fonctionne directement dans l’administration sans plugin supplémentaire. La seule nuance: la médiathèque en mode grille utilise une zone de dépôt personnalisée par-dessus le champ natif, le retour visuel y est donc plus riche, mais le mécanisme de base est le même. Vérifié sur les versions de WordPress de 5.0 à 6.7.

Quels formats de fichier sont pris en charge?

Le navigateur n’impose pas de restriction de format lors du glisser: le fichier est transmis à l’input tel quel. Si le champ possède un attribut accept (par exemple, accept="image/*,.pdf"), le filtrage s’appliquera au niveau de l’input exactement comme lors de la sélection via la boîte de dialogue. Les fichiers de types non pris en charge seront masqués de la file.

Le glisser-déposer est-il sûr?

Absolument. Faire glisser un fichier sur un <input type="file"> ne donne pas au site l’accès au système de fichiers de l’utilisateur. Le navigateur transmet uniquement le fichier lui-même (ou un tableau de fichiers avec multiple), mais pas son chemin sur le disque. Le modèle de sécurité est le même que lors d’un envoi via la boîte de dialogue standard: le site ne sait pas de quel dossier provient le fichier et ne peut pas lire les autres fichiers à proximité.

Pourquoi le glisser-déposer ne fonctionne-t-il pas sur certains sites?

Deux raisons. Premièrement: le site n’utilise pas un <input type="file"> natif, mais un élément personnalisé, une <div> ou un <button> stylisé qui ouvre la boîte de dialogue par programmation. Les événements natifs de glisser-déposer ne sont pas liés à un tel élément. Deuxièmement: le JavaScript du site intercepte les événements dragover et drop au niveau du document et appelle e.preventDefault(), bloquant le comportement standard du navigateur. Généralement, les développeurs capturent ces événements pour leur propre zone de dépôt et ne s’attendent pas à ce que cela casse l’envoi natif.

Puis-je faire glisser un fichier d’un navigateur à un autre?

Non. Le mécanisme fonctionne uniquement depuis le gestionnaire de fichiers du système d’exploitation vers la fenêtre du navigateur. Le glisser entre onglets ou d’un navigateur à un autre n’est pas pris en charge: le modèle de sécurité du navigateur ne permet pas l’accès au système de fichiers d’un autre contexte.

Que choisir: zone de dépôt ou bouton natif

L’astuce du glisser-déposer sur le bouton de sélection de fichier fait gagner du temps et réduit les frictions. Plus besoin de saisir la souris, de viser le bouton «Parcourir», de naviguer dans l’arborescence des dossiers. Un seul geste, et le fichier est déjà dans le formulaire.

Pour les scénarios simples, envoi de documents, scans, archives, installation de plugins dans WordPress, le comportement natif avec une légère amélioration visuelle est largement suffisant. Avant d’embarquer des kilooctets de JavaScript pour une zone de dépôt personnalisée, vérifiez: peut-être que votre formulaire se contente de ce que le navigateur sait déjà faire.

Si vous administrez des sites WordPress, lors de votre prochaine mise à jour, essayez de faire glisser un plugin ou un thème directement sur le bouton d’envoi. Vous serez probablement surpris de voir à quel point c’est plus simple que de naviguer dans l’explorateur de fichiers.