Как создать один облачный экземпляр с несколькими функциями resultCallback

Question

Я пытаюсь повторно использовать один экземпляр виджета загрузки Cloudinary для загрузки и извлечения загруженной информации мультимедиа из нескольких мест в моем приложении реагирования?

Могу ли я передать разные resultCallbacks одному и тому же экземпляру виджета загрузки Cloudinary?

Я создаю приложение реагирования, в котором разные текстовые блоки связаны с разными изображениями.Я использую виджет Cloudinary upload для обработки загрузок, а затем отображаю результаты рядом с соответствующим текстовым блоком.

В настоящее время я создаю новый экземпляр виджета Cloudinary для каждого текстового блока, но я понимаю, что это ресурсоемкий процесс.

Пытаясь это исправить, я создал синглтон для виджета загрузки, где я передаю функцию обратного вызова, которую я хотел бы запустить (я хотел бы добавить идентификатор к ответу на загрузку из Cloudinary для каждого текстаблок).

Проблема теперь в том, что после создания я не могу динамически изменить обратный вызов синглтона.

Есть ли способ обещать экземпляр или передать динамические функции resultCallback одному экземпляру?

const widget = {
  window: null,
  type: null,
};

/**
 * @class UploadWidget
 */
export default class UploadWidget {
  /**
   *
   * @param {object} options widget options
   * @param {string} options.type
   * @returns {undefined}
   */
  constructor({ cb, type }) {
    if (type !== widget.type) {
      widget.window = window.cloudinary.createUploadWidget(
        {
          cloudName: process.env.CLOUD_NAME,
          uploadPreset: process.env.UPLOAD_PRESET,
          styles: {
            palette: {
              window: '#FFFFFF',
              windowBorder: '#97AB35',
              tabIcon: '#4B9960',
              menuIcons: '#5A616A',
              textDark: '#000000',
              textLight: '#FFFFFF',
              link: '#FFCC53',
              action: '#4B9960',
              inactiveTabIcon: '#6D6D6C',
              error: '#F44235',
              inProgress: '#0078FF',
              complete: '#4B9960',
              sourceBg: '#FBFBFA',
            },
            fonts: {
              default: null,
              "'Fira Sans', sans-serif": {
                url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                active: true,
              },
            },
          },
        },
        cb
      );
      widget.type = type;
    }

    return widget.window;
  }
}

cb - это функция со следующим определением

function(error, result) 

Где error равно нулю в случае успеха или сообщению об ошибке в случае сбоя, а result - это объект JSON, детализирующий инициированное событие.

Answer 1

Почему бы не сделать обертку обратного вызова? Таким образом, вы можете изменить переменную, которая хранит правильный обратный вызов? Как вы можете видеть здесь, у меня есть this.callbackHandler в качестве обратного вызова для uploadwidget и переменная с именем trueCallback, которая хранит предполагаемую функцию обратного вызова. this.callbackHandler просто передает свои аргументы реальному обратному вызову, который является переменной, которую можно легко определить следующим образом:

//Redefining true callback
let uploadWidget = new UploadWidget(//variables here);
uploadWidget.trueCallback = someNewCallbackHere;

/**
 * @class UploadWidget
 */
export default class UploadWidget {
  /**
   *
   * @param {object} options widget options
   * @param {string} options.type
   * @returns {undefined}
   */
  constructor({ cb, type }) {
    this.trueCallback = cb;
    if (type !== widget.type) {
      widget.window = window.cloudinary.createUploadWidget(
        {
          cloudName: process.env.CLOUD_NAME,
          uploadPreset: process.env.UPLOAD_PRESET,
          styles: {
            palette: {
              window: '#FFFFFF',
              windowBorder: '#97AB35',
              tabIcon: '#4B9960',
              menuIcons: '#5A616A',
              textDark: '#000000',
              textLight: '#FFFFFF',
              link: '#FFCC53',
              action: '#4B9960',
              inactiveTabIcon: '#6D6D6C',
              error: '#F44235',
              inProgress: '#0078FF',
              complete: '#4B9960',
              sourceBg: '#FBFBFA',
            },
            fonts: {
              default: null,
              "'Fira Sans', sans-serif": {
                url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                active: true,
              },
            },
          },
        },
        this.callbackHandler
      );
      widget.type = type;
    }

    return widget.window;
  }

  callbackHandler = (err, res) => {
    this.trueCallback(err, res);
  }
}