Лучший способ создать неизвестное количество экземпляров JackUp

Question

Мы используем JackUp для загрузки изображения ajax в Rails. Мы выбрали его, потому что он не предполагает очень многого, и это довольно легкий вес.

После это пример кода, мы придумали что-то вроде этого:

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(); 
    }); 

Это работает так же, как ожидается, с одной кнопкой загрузки изображений (классифицируется как file-drop). Однако на странице будет отображаться неизвестное количество этих кнопок загрузки изображений.

При наличии более одной кнопки загрузки каждый раз, когда файл добавляется, он добавляется ко всем image-block-container элементам, а не только к таргетингу. Похоже, что jackUp не имеет понятия элемента, который его вызвал.

Каков наилучший способ разрешить каждой кнопке загрузки знать, что называется? Я попытался окружить его в блоке .on('drop'.... Это дало мне доступ к элементу, но ни один из событий JackUp не был запущен.

Любая помощь или совет для облегченного Rails-ajax gem оценивается!

Answer 1

Вы в целом соответствуете нескольким частям вашего DOM с помощью этого запроса: $('[data-behavior=image-block-container]'). Несколько элементов, соответствующих этому селектору, предположительно являются причиной вашей странной проблемы с обновлением.

Если вы хотите предназначаться только элемент, который пользователь взаимодействовал с того, e переменной в обработчике upload:imageRenderReady события должны иметь [target][1], который, как правило, то, что пользователь взаимодействовал с и вы должны получить близко к тому, что вы хотите (в зависимости от того, как структурирована ваша DOM).

От JQuery:

Целевое свойство может быть элемент, который зарегистрирован для события или потомок его.