Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

input file renseigné par onclick d'une image ?


Sujet :

JavaScript

  1. #1
    Membre du Club
    input file renseigné par onclick d'une image ?
    Hellooooo

    Me revoilà avec un truc torduuuuu

    Je suis en train de créer (c'est déjà bien abouti) un utilitaire web qui va me permettre de gagner beaucoup de temps pour rentrer mes disques dans une base de données.

    Mon utilitaire se base sur les données Discogs :
    Dans un champs formulaire, je colle le lien Discogs d’une release, par exemple https://www.discogs.com/fr/ICE-MC-Take-Away-The-Colour/release/961461, mon script converti le lien en lien valide pour l'API https://api.discogs.com/releases/961461 et ensuite récupère les informations dont j'ai besoin dans le fichier json, pour compléter les champs du formulaire. Jusque là , ça va.

    Lorsque l'on dispose d'un token Discogs (qu'on peut simplement créer dans l'espace développeur https://www.discogs.com/fr/settings/developers ) on peut aussi avoir les lien images de la release (genre les pochettes de disques, les macarons etc etc).

    Du coup, via ce moyen, je rempli un petit tableau où est affiché toutes les images, dans le formulaire.
    Sur chaque image, j’ai :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
     onclick='set_cover(this.src)'

    et voici la fonction appelée :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function set_cover(val){
    document.getElementById("selected_cover").src= val;
    document.getElementById("file-upload").value = val;
    }
    dans laquelle vous vous en douterez,""file-upload" correspond à l'id de l'input type file et "selected_cover" est l'image permettant d'afficher celle choisie (ou enregistrée si on édite la fiche disque).

    Bien évidement, ca ne fonctionne pas poru ce qui est de l'input file

    Actuellement je "contourne" le problème en copiant le lien dans le presse papier quand je clique sur l'image, puis je clique sur l'input , ce qui m'ouvrir l'explorateur de fichier, puis je colles le lien de l'image discogs, le navigateur la mettant dans ses fichiers temporaires, pour l'envoyer au input. C’est long, ennuyeux et l'image choisie n’apparaît pas puisque pas encore envoyée.


    Si quelqu'un a une tite idée

    Merkouin !!
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  2. #2
    Rédacteur/Modérateur

    Pour moi il s'agit d'une sécurité qui fait que tu ne peux pas accéder à la value d'un input type file avec JS.

    J'avais pensé à avoir plusieurs input file déjà renseignés en value, mais cela ne fonctionne pas non plus
    La seule façon de renseigner un input type file c'est manuellement par l'utilisateur.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Rédacteur/Modérateur

    En testant un peu j'arrive à ce message d'erreur

    jquery.js:8254 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    Autrement dit la seule valeur acceptée par un input file programmatiquement c'est une chaine vide ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  4. #4
    Membre du Club
    Hello la grenouille de l'espace

    Merci pour tes réponses. Je pense effectivement que c'est un problème de sécurité (pour pas aller chercher en caché, un fichier sur le poste client).

    Du coup, y a -t-il une autre solution ? Comme un truc du genre le script télécharge l'image en cache du navigateur et envoie du cache vers le serveur ?

    J'ai tenté aussi par un appel d'une page php qui copie le fichier depuis l'url vers le répertorie voulu, et évidement (car j'avais déjà rencontré le souci avec un formulaire), j'ai mon petit lot d'insultes :
    Warning: copy() [function.copy]: SSL operation failed with code 1. OpenSSL Error messages: error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version in <nom du fichier php>
    Warning: copy() [function.copy]: Failed to enable crypto in <nom du fichier php>
    Warning: copy(<url du fichier>) [function.copy]: failed to open stream: operation failed in <nom du fichier php>
    Car les url sont évidement https only (avec un url en http ca marche)
    Et je ne trouve pas de moyen de contourner ce problème.
    Pourtant, l'url, avec le navigateur, je peux voir l'image qui correspond. Il faudrait pouvoir émuler un navigateur par la page php qui copie le fichier , mais aucune idée de comment faire, ni même si c'est faisable.
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

  5. #5
    Membre du Club
    Couiiiiinnnn !

    J'ai passé le WE à chercher des script qui permettraient de faire par un moyen ou un autre, ce que je veux : Choisir parmi des images distantes (celles de Discogs), en cliquant dessus, pour que le script en fasse ce qu'il veut puis au final la sauvegarder sur mon serveur quand je valide le formulaire (le formulaire étant validé en ajax) :

    - Tenter de donner comme valeur à l'input file, l'URL de l'image : FAIL
    - Tenter de passer l'URL de l’image dans une variable ajax pour que le serveur récupère l'image et la copie sur le serveur : FAIL (Machin CORS là)
    - Tenter de forcer le download (ajout download='url' dans la balise img) de l’image en cliquant dessus et ensuite via l'input file , aller la rechercher (bof hein) : FAIL
    - Tenter de convertir l'image en base64 (dans le but de passer le résultat en tant que variable et reconstituer l'image coté serveur), par exemple déjà ca https://dev.to/migsarnavarro/how-to-...avascript-4k8e : FAIL (SecurityError: The operation is insecure. même avec la modif dont l'auteur parle)
    Je ne peux même pas liste tout ce que j'ai essayé tellement j'ai la tronche en bouillie )à faire d'avoir en plus joué au jeu de piste (des membres qui répondent sur des forum, en mettant un lien vers un mesage d'un autre sujet, qui contient un lien vers un autre messages d'un autre sujet etc etc le truc qui n'en fini pas et au final on a jamais la réponse )

    C'est quand même dingue d'être autant emmerdé pour une seul fonction

    Je suis preneur d'idée (qui fonctionne tant qu'à faire)

    Merkouin !!!
    Retrouvez-moi tous les dimanches à 22H pour une heure de mix en live tout au vinyle sur eurodance90.fr

###raw>template_hook.ano_emploi###