Discard changes to frontend/src/components/Settings/ProfileImageEditor.vue

frontend/src/components/Settings/ProfileImageEditor.vue

@@ -0,0 +1,64 @@
+<template>
+  <FileUploader
+    @success="(file) => setUserImage(file.file_url)"
+    :validateFile="validateFile"
+  >
+    <template v-slot="{ file, progress, error, uploading, openFileSelector }">
+      <div class="flex flex-col items-center">
+        <button
+          class="group relative rounded-full border-2"
+          @click="openFileSelector"
+        >
+          <div
+            class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-ink-gray-5 transition-opacity"
+            :class="[
+              uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+              'drop-shadow-sm',
+            ]"
+          >
+            <span
+              class="inline-block rounded-md bg-surface-gray-7/60 px-2 py-1 text-ink-white"
+            >
+              {{
+                uploading
+                  ? `Uploading ${progress}%`
+                  : profile.user_image
+                  ? 'Change Image'
+                  : 'Upload Image'
+              }}
+            </span>
+          </div>
+          <img
+            v-if="profile.user_image"
+            class="h-64 w-64 rounded-full object-cover"
+            :src="profile.user_image"
+            alt="Profile Photo"
+          />
+          <div v-else class="h-64 w-64 rounded-full bg-surface-gray-2"></div>
+        </button>
+        <ErrorMessage class="mt-4" :message="error" />
+        <div class="mt-4 flex items-center gap-4">
+          <Button v-if="profile.user_image" @click="setUserImage(null)">
+            Remove
+          </Button>
+        </div>
+      </div>
+    </template>
+  </FileUploader>
+</template>
+<script setup>
+import { FileUploader } from 'frappe-ui'
+
+const profile = defineModel()
+
+function setUserImage(url) {
+  profile.value.user_image = url
+}
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
+}
+</script>