Clic automatique sur un input de type file (sur Chrome)

**CrazyGeekMan** · 22/03/2019, 15h20

Bonjour,

Après de multiples recherches je n'arrive pas à trouver ce que je recherche
Si quelqu'un trouve une solution ce sera mon sauveur

Dans ma page html j'ai un input :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body onload="cliquer()">
<input type='file' id='test'>
</body>

Mon objectif est très simple mais à cause de la sécurité mise en place par Chrome cela paraît impossible (mais rien n'est impossible en informatique n'est-ce pas ?

) :
Je veux qu'à la fin du chargement de la page un script JavaScript simule un clic sur l'input de la page web (et donc sans aucune action de la part de l'utilisateur !)

J'ai donc tout bonnement essayé ce code :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function cliquer() {
	document.getElementById("test").click();
}

Il fonctionne sur Internet Explorer et sur Mozilla Firefox, Chrome me tire la langue et ne veut rien entendre..

J'ai donc vu un topic qui demande d'utiliser jQuery, ce que j'ai fait :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function() 
{
	$('#test').trigger('click').click();
});

Toujours aucun résultat..
Pourtant la fonction click() fonctionne bien, je l'avais testé sur un élément

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type='radio' id='test2'>

Et là en appliquant les deux méthodes précédentes le radio button est bien sélectionné à la fin du chargement de la page.

Merci à celui qui se penchera de plus près sur mon problème !

Bonne journée

**danielhagnoul** · 22/03/2019, 21h42

Normalement, il suffit de provoquer un clic, mais c'est impossible pour raison de sécurité !
La boîte de dialogue du sélecteur de fichier ne peut être affichée qu'avec une activation de l'utilisateur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    document.querySelector('#test').click();
 
    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

**CrazyGeekMan** · 23/03/2019, 11h44

Hey

Merci de t'être penché sur mon problème !

Normalement, il suffit de provoquer un clic, mais c'est impossible pour raison de sécurité !
La boîte de dialogue du sélecteur de fichier ne peut être affichée qu'avec une activation de l'utilisateur.

C'est vraiment frustrant car sur Firefox et IE cela est tout à fait possible ^^'

Le code que tu m'as proposé ne résout malheureusement pas le soucis.

Par contre je suis tombé sur un lien très intéressant puisqu'il reproduit à la lettre ce que je recherche :
https://jsfiddle.net/0L794s53/1/

Lorsque la page a chargé, la boîte de sélection d'un fichier s'ouvre sans aucune action de ma part !

Ici l'explication associée (LinusBorg):
https://github.com/vuejs/vue/issues/7028

Je t'avoue que je n'ai pas très bien compris la démarche ^^'

Il faudrait donc que je passe par le framework Vue.js pour faire des bidouilles sur les éléments graphiques de la page ?

Bonne journée danielhagnoul

**Beginner.** · 23/03/2019, 14h48

Salut,

Envoyé par CrazyGeekMan

Par contre je suis tombé sur un lien très intéressant puisqu'il reproduit à la lettre ce que je recherche :
https://jsfiddle.net/0L794s53/1/

J'ai eu la même idée (utiliser la fonction setTimeout) mais sur Chrome cela ne fonctionnait toujours pas...

PS : Je pense que le code en question n'a rien à voir avec Vue.js, c'est juste que la fonction setTimeout est utilisée pour déclencher le clique un certain temps (1000ms) après le chargement du script... Je pense que ce code est justement un exemple sans Vue.js pour mettre en évidence le problème avec Chrome...

**CrazyGeekMan** · 25/03/2019, 16h49

Salut à toi Beginner.

!

Envoyé par Beginner.

J'ai eu la même idée (utiliser la fonction setTimeout) mais sur Chrome cela ne fonctionnait toujours pas...

Ce lien en question m'intrigue puisqu'il ouvre l'explorateur de fichier de façon complètement aléatoire

sur Chrome !

https://jsfiddle.net/0L794s53/1/

Essaie de cliquer dessus, si rien ne se passe appuie 2 ou 3 fois sur f5
Si toujours rien ferme l'onglet et réessaie encore
Tu verra qu'à un moment donné le click() fonctionnera..

(je n'ai aucune explication à ça.. ?)

Limite si ça ne marche pas de ton côté je suis prêt à enregistrer mon écran pour te prouver que l'explorateur s'ouvre !

Bonne journée

**ABCIWEB** · 25/03/2019, 20h50

Salut,

Chez moi cela ne fonctionne même pas avec Firefox. Tu devrais changer de stratégie. Pourquoi veux-tu faire cela, quel est l'intérêt ? S'il y a une raison pratique que tu ne nous a pas indiquée dis-là nous, on trouvera certainement des moyens de t'aider, mais tel quel, sur un onload tu risque de chercher longtemps pour rien.

Au passage pour jQuery ce serait plutôt $('#test').trigger('click'); mais cela ne changera rien dans ton cas, car c'est le onload qui pose problème pour un input de type file.

**CrazyGeekMan** · 26/03/2019, 17h50

Salut

,

Tu dois sans doute avoir raison, je ferai mieux de vous expliquer l'intérêt de cette solution.

Je développe actuellement une application sous Unity en C# qui doit être déployable au format WebGL.
Je ne touche donc pas directement au JavaScript (j'ai donné l'exemple de onload pour simplifier la question et les éventuelles réponses).
Pour écrire du code JavaScript je passe par un plugin .jslib, Unity arrive par ce biais à interpréter du JS depuis du code C#.
Voici une page expliquant la situation :
https://docs.unity3d.com/Manual/webg...scripting.html

J'ai donc une interface utilisateur codée en C#, dès que l'utilisateur clique sur le bouton adéquat, du code JS est lancé.
Dans mon code le JS crée un input file puis clique sur celui-ci automatiquement pour demander à l'utilisateur la sélection d'un fichier.

Quelle pourrait être la stratégie alternative ?
J'ai pensé à créer un bouton avec JS pour cliquer sur l'input mais esthétiquement et fonctionnellement parlant je trouve ça vraiment déplorable

(deux clics de l'utilisateur pour aboutir à un résultat).

Envoyé par ABCIWEB

c'est le onload qui pose problème pour un input de type file.

Je t'assure que le problème c'est la fonction click() depuis un élément input file, j'ai effectué plusieurs tests et click() fonctionnement bien avec un button par exemple.

Merci de bien vouloir m'aider à résoudre ce problème

**ABCIWEB** · 28/03/2019, 00h18

A mon avis le problème vient du fait que tu crée l'input de type file dynamiquement et que tu simules un click dessus en même temps. Il faut séparer la création de l'input par rapport au click sur cet input, on ne peut pas faire les deux en même temps. Une solution serait de créer un input de type file caché au chargement de la page, pour pouvoir ensuite simuler un click dessus.

Par exemple vite fait avec jQuery :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<meta name="Description" content = "">
<script src="Scripts/jquery.js"></script>
<script>
$(function() 
{
        // Au chargement de la page je crée un input type file caché
        $('body').append($('<input type="file" id="filehidden" style="display:none">'));
        
        // Définition du comportement du boutton id = buttonfilehidden
        $('#buttonfilehidden').on('click',function(){
                $('#filehidden').click();
        });
})
</script>
</head>
<body>
<input type='button' id='buttonfilehidden' value="test">
</body>
</html>

Clic automatique sur un input de type file (sur Chrome)

JavaScript

Discussions similaires

Partager

Partager