Mettre en forme un input type=’file’
Introduction
Un étudiant m’a demandé s’il était possible de forcer un input type=’file » si un internaute avait déjà téléchargé un fichier précédemment.
L’objectif de cette demande est de faciliter la vie de l’internaute et du webmaster : s’il a déjà téléchargé un fichier autant lui montrer
La sécurité qui bloque
La première idée est d’ajouter un attribut value à la balise … le Navigateur l’ignore ???
La deuxième idée est de modifier la valeur de l’attribut via javascript :
document.getElementById('upload').value= "nom fichier"
Là, le navigateur affiche un message d’erreur qui annonce que cette action est bloquée afin de préserver la sécurité …
La modification de la valeur de la balise input type=’file’ ne peut être réalisée que suite à une action réalisée par l’internaute. Les scripts / les attributs sont refusés ou ignorés
Impossible de capturer l’événement Cancel de la pop up d’exploration
J’ai beaucoup cherché sur le net pour trouver s’il est possible de capturer en javascript si l’internaute clique sur le bouton Annuler … Certain navigateur comme Chrome récupére l’événement et d’autre comme Firefox ne l’écoute pas …
Pour tous les navigateurs, il y a deux événements :
- Click : lorsque l’internaute clique sur le bouton
- Change : si l’internateur a sélectionné un fichier
Utilisation de la balise label for
La solution est d’utiliser la balise <label for="id_input"> et de masquer la balise <input type='file' id="id_input">.
La balise label va déclencher l’input type=’file’ suite au click dessus et va donc lancer l’explorer de fichier
Si l’utilisateur sélectionne un fichier, il faut alors le capturer via change et afficher le input et masquer le label !!
Simuler un input type=’file’ qui est prérempli
Fichier index.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>html input file apparence si téléchargement déjà réalisé</title>
<style>
.label{
padding:3px 10px 2px 10px;
font-size: 12px;
font-family: Arial;
background:#E1E1E1;
border:1px solid #ADADAD;
}
.label:hover{
background:#E5F1FB;
border:1px solid #0078D7;
}
#oldResultUpload{
font-family: Arial;
font-size: 12px;
}
</style>
</head>
<body>
<!-- inspiré par https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ -->
<form action="my-script.php" enctype="multipart/form-data" method="post">
<?php $valeur = "fichier.png" ?>
<?php if(strlen($valeur) > 0){ ?>
<input type='file' id='upload' style="display: none" />
<label for="upload" id="lblUpoad" class="label">Pourcourir...</label>
<label for="upload"><span id="oldResultUpload"><?php echo $valeur ?></span></label>
<script>
function $$(selector){
return document.querySelector(selector);
}
$$('#upload').addEventListener('change',function(){
this.style['display'] = "block";
$$("#lblUpoad").style['display'] = "none";
$$("#oldResultUpload").style['display'] = "none";
});
</script>
<?php }else{ ?>
<input type="file" >
<?php } ?>
<div><input type="submit" value="Envoyer"></div>
</form>
<!-- a lire https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications -->
</body>
</html>