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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager