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

Мы используем 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 приветствуются!

1 ответ

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

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

Из jQuery:

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

Другие вопросы по тегам