refactor: add dialog delete

src/components/upload-file/UploadFile.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { SaveButton, UndoButton } from 'components/button';
+import { SaveButton, UndoButton, CloseButton } from 'components/button';
+import { dialog } from 'stores/utils';
 
 import { VuePDF, usePDF } from '@tato30/vue-pdf';
 
@@ -95,6 +96,7 @@ watch(currentFileSelected, () => {
 const emit = defineEmits<{
   (e: 'sendOcr', dropdown: string, file?: File): void;
   (e: 'save', เgroup: string, file?: File): void;
+  (e: 'deleteFile', filename: string): void;
 }>();
 
 const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
@@ -259,7 +261,30 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       <div class="q-pa-sm bordered-r bordered-b full-height">
         <slot name="form" :mode="currentMode" />
 
-        {{ currentFileSelected }}
+        <div class="row items-center">
+          {{ currentFileSelected }}
+          <CloseButton
+            icon-only
+            type="button"
+            @click="
+              () => {
+                dialog({
+                  color: 'negative',
+                  icon: 'mdi-alert',
+                  title: $t('dialog.title.confirmDelete'),
+                  actionText: $t('general.delete'),
+                  persistent: true,
+                  message: $t('dialog.message.confirmDelete'),
+                  action: async () => {
+                    $emit('deleteFile', currentFileSelected);
+                  },
+
+                  cancel: () => {},
+                });
+              }
+            "
+          />
+        </div>
       </div>
     </div>
   </div>