Cloudinary Storyblok Fieldtype

Fieldtype.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
  <div v-if="modalOpen" style="height: 800px">
    <a class="uk-button uk-display-block" @click="closeModal">Close</a>
  </div>
  <a v-else class="uk-button uk-display-block" @click="openCloudinary">Select image</a>
</div>`,
  data() {
    return {
      modalOpen: false
    }
  },
  methods: {
    initWith() {
      return {
        plugin: 'example_plugin',
        example: 'Hello world!'
      }
    },
    pluginCreated() {
      // eslint-disable-next-line no-restricted-globals
      const rootWindow = window;
      const rootDocument = window.document;
      const script = rootDocument.createElement(`script`);
      script.type = `text/javascript`;
      script.onload = () => {
        this.mediaLibrary = rootWindow.cloudinary.createMediaLibrary({
          api_key: this.options.apiKey,
          cloud_name: this.options.cloudName,
        }, { insertHandler: this.addImages });
      };
      script.src = `https://media-library.cloudinary.com/global/all.js`;
      rootDocument.getElementsByTagName(`head`)[0].appendChild(script);
    },
    closeModal() {
      this.$emit('toggle-modal', false)
      this.modalOpen = false
    },
    openCloudinary() {
      this.$emit('toggle-modal', true)
      this.modalOpen = true
      this.mediaLibrary.show()
    },
    addImages() {
      this.closeModal()
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}