Meilleure façon de créer un nombre inconnu d'instances JackUp

Question

Nous utilisons JackUp pour le téléchargement d'images ajax dans Rails. Nous l'avons choisi parce qu'il ne suppose pas grand-chose et qu'il est plutôt léger.

Après son code d'exemple, nous sommes arrivés avec quelque chose comme ceci:

let jackUp = new JackUp.Processor({ 
    path: '/images' 
    }); 

    jackUp.on('upload:imageRenderReady', (e, options) => { 
    options.image.attr("data-id", options.file.__guid__).css({ 
     border: "5px solid red" 
    }); 
    $('[data-behavior=image-block-container]').prepend(options.image); 

    }).on("upload:sentToServer", (e, options) => { 
    $(`img[data-id='${options.file.__guid__}']`).css({ 
     borderColor: 'yellow' 
    }); 

    }).on("upload:success", (e, options) => { 
    $(`img[data-id='${options.file.__guid__}']`).css({ 
     borderColor: "green" 
    }); 

    }).on("upload:failure", (e, options) => { 
    alert(`'${options.file.name}' upload failed; please retry`); 
    $(`img[data-id='${options.file.__guid__}']`).remove(); 
    }); 

    $('.file-drop').jackUpDragAndDrop(jackUp); 

    $(document).bind('drop dragover', e => { 
    e.preventDefault(); 
    }); 

Cela fonctionne exactement comme prévu avec un bouton de téléchargement d'image (classé file-drop). Cependant, une page aura un nombre inconnu de ces boutons de téléchargement d'image.

Lorsqu'il y a plusieurs boutons de téléchargement, chaque fois qu'un fichier est ajouté, il est ajouté à tous les éléments image-block-container, au lieu de simplement celui qui a été ciblé. Il semble que jackUp n'a aucune notion de l'élément qui l'a déclenché.

---

Quelle est la meilleure façon de permettre à chaque bouton de téléchargement de savoir ce qu'il a appelé? J'ai essayé de l'entourer dans un bloc .on('drop'.... Cela m'a donné accès à l'élément, mais aucun des événements de JackUp n'a été déclenché.

Toute aide ou conseil pour une gemme de téléchargement ajax Rails-friendly est appréciée!

Answer 1

Vous correspondez largement à plusieurs parties de votre DOM avec ce sélecteur de requête: $('[data-behavior=image-block-container]'). Plusieurs éléments correspondant à ce sélecteur sont probablement la cause de votre problème de mise à jour bizarre.

Si vous souhaitez cibler simplement l'élément que l'utilisateur a été en interaction avec la variable e dans le gestionnaire d'événements upload:imageRenderReady doit avoir une [target][1] qui est généralement ce que l'utilisateur a été en interaction avec et si vous se rapprocher de ce que vous voulez (en fonction de la structure de votre DOM).

De jQuery:

La propriété cible peut être l'élément qui a enregistré pour l'événement ou un descendant de celui-ci.