Fix bug with multiple uploadcare events being triggered with one button

client/src/components/ui/file-upload/FileUpload.vue

@@ -4,14 +4,14 @@
       <document-block
         :value="{ url: document }"
         show-trash-icon
-        @trash="$emit('change-document-url', '')"
+        @trash="changeDocumentUrl('')"
       />
     </template>
     <template v-else>
       <simple-file-upload
         :with-text="withText"
         :value="document"
-        @link-change-url="$emit('change-document-url', $event)"
+        @link-change-url="changeDocumentUrl($event)"
       />
     </template>
   </div>
@@ -35,7 +35,13 @@ export default {
       default: false,
     },
   },
+  emits: ['changeDocumentUrl'],
   components: { SimpleFileUpload, DocumentBlock },
+  methods: {
+    changeDocumentUrl(val) {
+      this.$emit('change-document-url', val);
+    },
+  },
 };
 </script>
 

client/src/components/ui/file-upload/SimpleFileUpload.vue

@@ -60,7 +60,8 @@ const clickUploadCare = () => {
   }
 }
 
-:deep(.uploadcare--widget) {
+/* :deep(.uploadcare--widget) { */
+.uploadcare--widget {
   display: none;
 }
 </style>

client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue

@@ -5,23 +5,27 @@
     role="uploadcare-uploader"
     name="file-upload"
     data-system-dialog
+    :id="id"
     ref="uploadcare-filedialog"
   />
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue';
 import uploadcareWidget from 'uploadcare-widget';
 
-export default {
-  mounted() {
-    let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
+const id = crypto.randomUUID();
 
-    widget.onChange((result) => {
-      result.done((fileInfo) => {
-        let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
-        this.$emit('link-change-url', urlWithFilename);
-      });
+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>