diff --git a/Services/client/src/components/UploadExistDialog.vue b/Services/client/src/components/UploadExistDialog.vue
new file mode 100644
index 0000000..a34619f
--- /dev/null
+++ b/Services/client/src/components/UploadExistDialog.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+defineProps<{
+  notification: boolean
+}>()
+
+defineEmits(['update:notification', 'confirm', 'cancel'])
+</script>
+
+<template>
+  <q-dialog
+    :model-value="notification"
+    @update:model-value="(v) => $emit('update:notification', v)"
+    transition-show="scale"
+    transition-hide="scale"
+  >
+    <q-card style="width: 400px">
+      <q-card-section>
+        <div class="text-h6">
+          <q-icon
+            name="error"
+            color="warning"
+            size="2.5rem"
+          />เตือนพบไฟล์ชื่อซ้ำในระบบ
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        หากดำเนินการต่อข้อมูลจะถูกเขียนทับ
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-primary">
+        <q-space />
+        <q-btn
+          flat
+          label="ยกเลิก"
+          v-close-popup
+          @click="() => $emit('cancel')"
+        />
+        <q-btn
+          flat
+          label="ดำเนินการต่อ"
+          v-close-popup
+          class="text-red"
+          @click="() => $emit('confirm')"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>