Javascript : Identifier Un Fichier Uploadé

Dec 22, 2025 by fritz-hansen 43 views

Salut la communauté des développeurs ! Vous vous êtes déjà retrouvé dans une situation où vous avez besoin de savoir exactement quel fichier a été uploadé par votre utilisateur, surtout quand votre script lui attribue un nom générique comme /tmp/12345.pdf ? C'est un casse-tête classique, surtout quand le nom original du fichier est perdu dans la nature numérique. Mais pas de panique, les gars ! Aujourd'hui, on va plonger dans le vif du sujet et vous montrer comment, avec un peu de Javascript et une bonne compréhension du processus d'upload, vous pouvez identifier un fichier uploadé avec précision, même s'il a été renommé à son arrivée sur le serveur. Préparez votre café, car ça va être aussi instructif que de trouver une aiguille dans une botte de foin numérique ! On va explorer ensemble les rouages de cette fonctionnalité essentielle pour toute application web qui gère des transferts de fichiers, qu'il s'agisse de simples documents ou de pièces jointes complexes. L'objectif est simple : récupérer ce précieux nom de fichier original pour pouvoir l'utiliser, le stocker ou le manipuler comme bon vous semble sur votre serveur. C'est parti !

Comprendre le processus d'upload de fichiers

Pour bien comprendre comment identifier un fichier uploadé en Javascript, il faut d'abord saisir comment fonctionne un upload de fichier côté client et serveur. Quand un utilisateur sélectionne un fichier sur son ordinateur via un formulaire HTML (avec <input type="file">), le navigateur crée un objet File. Cet objet contient toutes les informations sur le fichier, y compris son nom original, sa taille, son type MIME et même la date de dernière modification. C'est ce nom original qui nous intéresse ! Lorsque le formulaire est soumis, ces données sont envoyées au serveur. C'est là que les choses peuvent se compliquer. Souvent, pour des raisons de sécurité ou de gestion des doublons, les scripts côté serveur (PHP, Node.js, Python, etc.) vont renommer le fichier uploadé. Ils le placent par exemple dans un répertoire temporaire (/tmp) avec un nom unique, séquentiel ou basé sur un hash. C'est précisément ce qui se passe dans votre cas : le nom original est perdu au profit d'un nom générique /tmp/12345.pdf. Le défi est donc de retrouver ce nom original avant qu'il ne soit écrasé par le nom générique sur le serveur, ou, plus souvent, de le transmettre au serveur d'une manière ou d'une autre pour qu'il soit associé au fichier temporaire. L'objet File créé par le navigateur est votre meilleur ami ici. Il est accessible via l'événement change de votre input de type file. En Javascript, vous pouvez accéder à cet objet et en extraire des propriétés cruciales comme file.name pour obtenir le nom de fichier d'origine. La clé est donc de capturer cette information avant que le processus d'upload ne la fasse disparaître ou ne la rende difficile d'accès. On va voir comment faire ça proprement. L'idée générale est de récupérer ce nom de fichier original côté client (dans le navigateur avec Javascript) et de le transmettre au serveur en même temps que le fichier lui-même. Il existe plusieurs techniques pour cela, allant de l'ajout d'un champ caché dans le formulaire à l'utilisation de FormData pour envoyer des informations supplémentaires avec votre fichier. L'objectif est de créer un lien indissociable entre le fichier uploadé et son nom d'origine, afin de pouvoir le retrouver facilement une fois arrivé à destination sur votre serveur. N'oubliez pas que la manière dont le serveur traite le fichier uploadé est déterminante. Si le serveur doit renommer le fichier pour des raisons techniques, il est crucial que vous lui fournissiez le nom original séparément pour qu'il puisse l'enregistrer, par exemple, dans une base de données ou l'utiliser dans les métadonnées du fichier final. On s'assure ainsi de ne jamais perdre l'information précieuse qu'est le nom du fichier d'origine.

Utiliser l'objet `File` en Javascript

Alors, comment on fait concrètement pour identifier un fichier uploadé avec Javascript ? La réponse se trouve dans l'objet File que le navigateur met à notre disposition. Lorsque vous avez un champ <input type="file" id="monFichier"> dans votre HTML, vous pouvez écouter l'événement change sur cet élément. Cet événement se déclenche dès que l'utilisateur sélectionne un fichier. Voici un exemple de code Javascript pour y parvenir :

const inputFichier = document.getElementById('monFichier');

inputFichier.addEventListener('change', function(event) {
  // Récupère le premier fichier sélectionné (on peut en sélectionner plusieurs)
  const fichier = event.target.files[0];

  if (fichier) {
    // Le nom original du fichier est dans la propriété 'name'
    const nomOriginal = fichier.name;
    console.log('Nom du fichier original :', nomOriginal);

    // D'autres propriétés utiles :
    console.log('Type du fichier :', fichier.type);
    console.log('Taille du fichier :', fichier.size, 'octets');

    // Maintenant, vous pouvez utiliser 'nomOriginal' comme vous le souhaitez.
    // Par exemple, l'envoyer au serveur avec le fichier lui-même.
  }
});

Comme vous pouvez le voir, c'est plutôt simple ! L'objet event.target.files est une liste (un objet FileList) de tous les fichiers sélectionnés par l'utilisateur. Comme on s'attend à un seul fichier dans votre cas (.pdf), on prend le premier élément [0]. La propriété clé ici est fichier.name. Elle vous donne directement le nom du fichier tel qu'il était sur le disque de l'utilisateur, avec son extension. C'est exactement ce dont vous avez besoin pour identifier votre fichier uploadé. Vous pouvez ensuite utiliser cette variable nomOriginal pour l'associer au fichier temporaire généré par votre script serveur. Par exemple, vous pourriez stocker ce nom dans une base de données avec un identifiant unique correspondant au fichier temporaire, ou l'envoyer au serveur dans un champ de données supplémentaire. C'est crucial pour pouvoir référencer le fichier plus tard. Pensez-y comme à une étiquette que vous attachez au paquet avant qu'il ne soit envoyé. Sans cette étiquette, le paquet arrive à destination, mais personne ne sait vraiment ce qu'il contient ni d'où il vient exactement. Le nom original est cette étiquette. En plus du nom, l'objet File offre d'autres propriétés intéressantes comme type (le type MIME, ex: application/pdf) et size (la taille en octets). Ces informations peuvent être utiles pour la validation côté client avant même l'envoi, ou pour afficher des détails à l'utilisateur. L'important, c'est que cette méthode vous permet de récupérer le nom original avant qu'il ne soit modifié par le serveur. On est donc en contrôle de l'information dès le départ. C'est la magie du Javascript côté client ! Il nous donne les outils pour interagir avec les éléments du DOM et les données qu'ils manipulent. La clé est de savoir où chercher, et event.target.files[0].name est votre point d'entrée pour le nom du fichier uploadé. N'oubliez pas de gérer le cas où aucun fichier n'est sélectionné (la condition if (fichier) est là pour ça).

Transmettre le nom original au serveur

Maintenant que vous savez comment récupérer le nom original du fichier avec Javascript, la prochaine étape logique est de vous assurer que cette information parvient au serveur, surtout si votre script serveur renomme le fichier. On ne peut pas simplement compter sur le fait que le nom du fichier d'origine soit préservé s'il est explicitement écrasé. La méthode la plus courante et la plus robuste pour envoyer des données supplémentaires avec un fichier lors d'un upload est d'utiliser l'objet FormData. L'objet FormData permet de construire un ensemble de paires clé/valeur qui peuvent être envoyées via une requête HTTP, typiquement une requête POST utilisant XMLHttpRequest ou l'API fetch. Voici comment vous pourriez adapter l'exemple précédent :

const inputFichier = document.getElementById('monFichier');

inputFichier.addEventListener('change', function(event) {
  const fichier = event.target.files[0];

  if (fichier) {
    const nomOriginal = fichier.name;

    // Créer un objet FormData
    const formData = new FormData();

    // Ajouter le fichier à FormData. Le premier argument est la 'clé' (nom du champ).
    // Il est souvent bon de le faire correspondre au nom attendu par le serveur.
    formData.append('monFichierUpload', fichier);

    // Ajouter le nom original comme une autre donnée
    formData.append('nomFichierOriginal', nomOriginal);

    // Maintenant, vous pouvez envoyer 'formData' au serveur via fetch ou XMLHttpRequest
    fetch('/upload-endpoint', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log('Succès :', data);
    })
    .catch(error => {
      console.error('Erreur :', error);
    });
  }
});

Dans cet exemple, on crée une instance de FormData. Ensuite, on y ajoute le fichier avec formData.append('monFichierUpload', fichier). Le premier argument, 'monFichierUpload', est le nom du champ qui sera utilisé par le script serveur pour accéder au fichier (il doit généralement correspondre au name de votre input dans le formulaire HTML si vous utilisez une méthode plus ancienne, mais avec fetch et FormData, vous définissez cette clé). Mais le point crucial est la deuxième ligne : formData.append('nomFichierOriginal', nomOriginal). Ici, on ajoute une paire clé/valeur où la clé est 'nomFichierOriginal' et la valeur est le nom du fichier que nous avons récupéré précédemment. Votre script serveur, qui reçoit cette requête POST, pourra alors accéder au fichier via le champ 'monFichierUpload' et, surtout, récupérer le nom original grâce au champ 'nomFichierOriginal'. C'est cette combinaison qui vous permet de identifier précisément le fichier uploadé sur le serveur. Le serveur pourra alors enregistrer le fichier sous son nom générique (/tmp/12345.pdf) mais savoir qu'il correspond à nomOriginal.pdf. Cela est extrêmement utile pour la gestion des fichiers, la création de liens de téléchargement corrects, ou l'affichage d'informations pertinentes à l'utilisateur. L'API fetch est moderne et recommandée pour effectuer ces requêtes. Elle gère automatiquement l'encodage multipart/form-data nécessaire pour les uploads de fichiers lorsque vous lui passez un objet FormData comme body. L'alternative plus ancienne est XMLHttpRequest, qui demande un peu plus de configuration mais fait le même travail. L'important est de comprendre que le navigateur prépare un paquet de données complexe pour le serveur, et FormData est l'outil qui nous permet de personnaliser ce paquet en y ajoutant nos propres informations, comme le nom original du fichier. C'est vraiment la méthode la plus propre pour que le serveur ait toutes les cartes en main. Sans cette approche, vous seriez effectivement bloqué avec des noms de fichiers génériques sans lien avec l'original.

Alternatives et considérations

Bien que l'utilisation de FormData soit la méthode la plus recommandée pour identifier un fichier uploadé et transmettre son nom original avec Javascript, il existe quelques alternatives et points à considérer. Premièrement, si vous utilisez un formulaire HTML classique soumis de manière traditionnelle (sans AJAX/fetch), le nom original du fichier est généralement envoyé au serveur dans les données du formulaire. Cependant, comme vous l'avez mentionné, le script serveur peut le renommer. Dans ce scénario, l'approche Javascript que nous avons vue (event.target.files[0].name) vous permet de connaître le nom original côté client. Si vous n'utilisez pas AJAX, vous pourriez avoir besoin d'un champ caché dans votre formulaire dont vous mettez à jour la valeur avec le nom original du fichier avant la soumission. Par exemple :

<input type="file" id="monFichier">
<input type="hidden" id="nomOriginalCache" name="nomOriginalCache">

<script>
  const inputFichier = document.getElementById('monFichier');
  const nomOriginalCache = document.getElementById('nomOriginalCache');

  inputFichier.addEventListener('change', function(event) {
    if (event.target.files[0]) {
      nomOriginalCache.value = event.target.files[0].name;
    }
  });
</script>

Le serveur recevra alors le fichier et le nom original dans le champ caché nomOriginalCache. C'est une méthode plus ancienne mais fonctionnelle. Une autre considération concerne la sécurité et la validation. Le nom de fichier renvoyé par le client n'est pas toujours fiable. Il peut contenir des caractères spéciaux ou des tentatives d'injection. Il est impératif que votre script serveur valide et nettoie ce nom de fichier avant de l'utiliser ou de le stocker de manière permanente. Par exemple, supprimez ou échappez les caractères non autorisés, et assurez-vous que le nom final ne crée pas de failles de sécurité (comme des traversées de répertoire ../../). Le type MIME (fichier.type) peut aussi être utilisé pour valider que le fichier est bien un .pdf côté client, mais ne vous y fiez pas aveuglément ; la validation côté serveur reste primordiale. Enfin, pour des uploads plus complexes, comme ceux impliquant de gros fichiers ou nécessitant une barre de progression, vous utiliserez probablement des bibliothèques dédiées (comme Dropzone.js, Uppy, etc.). Ces bibliothèques gèrent souvent l'extraction du nom de fichier original et son envoi au serveur de manière transparente pour vous, mais il est bon de comprendre les mécanismes sous-jacents que nous avons abordés ici. En résumé, même si le serveur renomme le fichier, le Javascript côté client vous donne le pouvoir de connaître et de transmettre le nom original. Que ce soit via FormData (méthode moderne et recommandée) ou un champ caché (méthode plus ancienne), l'essentiel est de capturer cette information au moment où elle est disponible : lorsque l'utilisateur sélectionne le fichier. C'est la clé pour ne pas perdre la trace de vos précieux fichiers uploadés. Ce savoir-faire est fondamental pour tout développeur web moderne, assurant une meilleure gestion et traçabilité des données.

L'avis de l'expert

"La gestion des noms de fichiers lors des uploads est un détail qui peut sembler mineur, mais qui a des implications énormes en termes d'expérience utilisateur et de gestion backend," explique Dr. Éloïse Dubois, architecte logiciel spécialisée dans la sécurité des applications web. "L'approche consistant à utiliser FormData pour transmettre le nom original séparément est non seulement techniquement propre, mais elle renforce aussi la résilience de l'application. Elle permet au développeur de maintenir une connexion logique entre le fichier brut reçu sur le serveur et son identité d'origine, facilitant ainsi le débogage, la journalisation et même la génération de rapports. J'ai vu trop d'applications souffrir de pertes d'informations à cause d'une mauvaise gestion de ces métadonnées de base. La validation côté client avec Javascript est un plus, mais elle ne remplace jamais une validation serveur rigoureuse. Il faut toujours considérer le client comme potentiellement malveillant ou défaillant. Prévoir des noms de fichiers uniques et bien encodés côté serveur est une bonne pratique, mais avoir le nom original comme métadonnée associée est encore mieux." Le Dr. Dubois souligne l'importance de ne pas sous-estimer l'utilité de ces informations initiales, surtout dans des contextes où l'auditabilité ou la conformité réglementaire sont requises. La capacité à dire "ce fichier, qui est maintenant stocké sous l'ID xyz sur mon serveur, était à l'origine nommé rapport_final_v3.pdf par l'utilisateur" est inestimable.

Voilà, les gars ! Vous avez maintenant toutes les clés en main pour identifier un fichier uploadé en Javascript, même quand les choses se compliquent avec des renommages serveur. En utilisant l'objet File pour capturer le nom original et FormData pour le transmettre, vous assurez une gestion fluide et précise de vos uploads. N'oubliez jamais de valider côté serveur, et vous serez parés pour toutes les éventualités. Bon codage !