<template>
  <input
    type="hidden"
    class="simple-file-upload-hidden-input"
    role="uploadcare-uploader"
    name="file-upload"
    data-system-dialog
    :id="id"
    ref="uploadcare-filedialog"
  />
</template>

<script setup>
import { onMounted } from 'vue';
import uploadcareWidget from 'uploadcare-widget';

const id = crypto.randomUUID();

const emit = defineEmits(['linkChangeUrl']);

onMounted(() => {
  let widget = uploadcareWidget.Widget(`#${id}`);

  widget.onChange((result) => {
    result.done((fileInfo) => {
      let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
      emit('link-change-url', urlWithFilename);
    });
  });
});
</script>
