How to use uploadcare-widget - 4 common examples

function getFile(url) {
  const groupPattern = /~\d+\/nth\/\d+\//;
  const uploaded = url.startsWith(CDN_BASE_URL) && !groupPattern.test(url);
  return uploadcare.fileFrom(uploaded ? 'uploaded' : 'url', url);
}

async function init({ options = { config: {}, settings: {} }, handleInsert } = {}) {
  const { publicKey, ...globalConfig } = options.config;
  const baseConfig = { ...defaultConfig, ...globalConfig };

  window.UPLOADCARE_PUBLIC_KEY = publicKey;

  /**
   * Register the effects tab by default because the effects tab is awesome. Can
   * be disabled via config.
   */
  uploadcare.registerTab('preview', uploadcareTabEffects);

  return {
    /**
     * On show, create a new widget, cache it in the widgets object, and open.
     * No hide method is provided because the widget doesn't provide it.
     */
    show: ({ value, config: instanceConfig = {}, allowMultiple, imagesOnly = false } = {}) => {
      const config = { ...baseConfig, imagesOnly, ...instanceConfig };
      const multiple = allowMultiple === false ? false : !!config.multiple;
      const resolvedConfig = { ...config, multiple };
      const files = getFiles(value);

      /**
       * Resolve the promise only if it's ours. Only the jQuery promise objects
       * from the Uploadcare library will have a `state` method.
       */

const buildUrl = fileInfo => {
    const { cdnUrl, name, isImage } = fileInfo;

    let url =
      isImage && settings.defaultOperations ? `${cdnUrl}-${settings.defaultOperations}` : cdnUrl;
    const filenameDefined = !url.endsWith('/');

    if (!filenameDefined && settings.autoFilename) {
      url = url + name;
    }

    return url;
  };

  uploadcare.openDialog(files, config).done(({ promise, files }) => {
    const isGroup = Boolean(files);

    return promise().then(info => {
      if (isGroup) {
        return Promise.all(
          files().map(promise => promise.then(fileInfo => buildUrl(fileInfo))),
        ).then(urls => handleInsert(urls));
      } else {
        handleInsert(buildUrl(info));
      }
    });
  });
}

  return new Promise(resolve => uploadcare.loadFileGroup(groupId).done(group => resolve(group)));
}