From d609561d669eb24cdfba5c93cdef2df431173040 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Dec 2024 15:35:33 +0530
Subject: [PATCH] fix: added image uploader control

---
 .../src/components/Controls/ImageUploader.vue | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 frontend/src/components/Controls/ImageUploader.vue

diff --git a/frontend/src/components/Controls/ImageUploader.vue b/frontend/src/components/Controls/ImageUploader.vue
new file mode 100644
index 00000000..692ef201
--- /dev/null
+++ b/frontend/src/components/Controls/ImageUploader.vue
@@ -0,0 +1,42 @@
+<template>
+  <FileUploader
+    :file-types="image_type"
+    class="text-base"
+    @success="
+      (file) => {
+        $emit('upload', file.file_url)
+      }
+    "
+  >
+    <template v-slot="{ progress, uploading, openFileSelector }">
+      <div class="flex items-end space-x-1">
+        <Button @click="openFileSelector">
+          {{
+            uploading
+              ? `Uploading ${progress}%`
+              : image_url
+                ? 'Change'
+                : 'Upload'
+          }}
+        </Button>
+        <Button v-if="image_url" @click="$emit('remove')">Remove</Button>
+      </div>
+    </template>
+  </FileUploader>
+</template>
+<script setup>
+import { FileUploader, Button } from 'frappe-ui'
+
+const prop = defineProps({
+  image_url: String,
+  image_type: {
+    type: String,
+    default: 'image/*',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+})
+const emit = defineEmits(['upload', 'remove'])
+</script>