From c6fc2de8832517349065f42cb122af9b7b08181d Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sat, 7 Mar 2026 22:15:44 +0530
Subject: [PATCH 1/2] feat: Image uploader component with crop

---
 frontend/package.json                         |   1 +
 .../ImageUploader/ImageUploader.vue           | 299 ++++++++++++++++++
 frontend/yarn.lock                            |  21 +-
 3 files changed, 320 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ImageUploader/ImageUploader.vue

diff --git a/frontend/package.json b/frontend/package.json
index 06cde99..53cde0d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "pinia": "^3.0.3",
     "socket.io-client": "^4.7.2",
     "vue": "^3.5.13",
+    "vue-advanced-cropper": "^2.6.2",
     "vue-router": "^4.5.0",
     "vue-sonner": "^2.0.9",
     "vuedraggable": "^4.1.0",
diff --git a/frontend/src/components/ImageUploader/ImageUploader.vue b/frontend/src/components/ImageUploader/ImageUploader.vue
new file mode 100644
index 0000000..b5a4977
--- /dev/null
+++ b/frontend/src/components/ImageUploader/ImageUploader.vue
@@ -0,0 +1,299 @@
+<template>
+    <div>
+        <input
+            ref="inputRef"
+            type="file"
+            :accept="acceptString"
+            class="hidden"
+            @change="onFileAdd"
+        />
+        <slot
+            v-bind="{
+                file,
+                uploading,
+                progress,
+                uploaded,
+                message,
+                error,
+                total,
+                success,
+                openFileSelector,
+            }"
+        >
+            <Button @click="openFileSelector" :loading="uploading">
+                {{ uploading ? `Uploading ${progress}%` : "Upload image" }}
+            </Button>
+        </slot>
+
+        <!-- Crop dialog: Frappe UI -->
+        <Dialog
+            v-model="cropDialogOpen"
+            :options="{
+                title: 'Crop image',
+                size: 'lg',
+            }"
+        >
+            <template #body-content>
+                <p class="text-sm text-ink-gray-6 mb-4">
+                    Adjust the crop area to {{ cropDimensions.width }}×{{ cropDimensions.height }}
+                    pixels, then upload.
+                </p>
+                <div class="cropper-container">
+                    <Cropper
+                        v-if="cropImageUrl"
+                        ref="cropperRef"
+                        :src="cropImageUrl"
+                        :stencil-props="{
+                            aspectRatio: cropDimensions.width / cropDimensions.height,
+                        }"
+                        :canvas="{
+                            width: cropDimensions.width,
+                            height: cropDimensions.height,
+                        }"
+                        image-restriction="stencil"
+                        class="cropper"
+                    />
+                </div>
+            </template>
+            <template #actions="{ close }">
+                <div class="flex justify-end gap-2">
+                    <Button variant="ghost" label="Cancel" @click="close" />
+                    <Button variant="outline" label="Reset" @click="onResetCrop" />
+                    <Button
+                        variant="solid"
+                        label="Crop & Upload"
+                        :loading="uploading"
+                        :disabled="!cropperReady"
+                        @click="onCropAndUpload"
+                    />
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+import { Button, Dialog, FileUploadHandler } from "frappe-ui";
+import type { UploadOptions, UploadedFile } from "frappe-ui";
+
+const props = withDefaults(
+    defineProps<{
+        cropDimensions: { width: number; height: number };
+        fileTypes?: string | string[];
+        uploadArgs?: UploadOptions;
+        validateFile?: (file: File) => Promise<string | void>;
+    }>(),
+    {
+        fileTypes: () => ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/webp"],
+    }
+);
+
+const emit = defineEmits<{
+    success: [data: UploadedFile];
+    failure: [error: unknown];
+}>();
+
+const acceptString = computed(() => {
+    const types = props.fileTypes;
+    if (typeof types === "string") return types;
+    return Array.isArray(types) ? types.join(",") : "image/*";
+});
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const cropperRef = ref<InstanceType<typeof Cropper> | null>(null);
+const cropDialogOpen = ref(false);
+const cropperReady = ref(false);
+
+const file = ref<File | null>(null);
+const uploading = ref(false);
+const uploaded = ref(0);
+const total = ref(0);
+const error = ref<string | null>(null);
+const message = ref("");
+const finishedUploading = ref(false);
+const cropImageUrl = ref<string | null>(null);
+const pendingFileName = ref<string>("image.png");
+
+const progress = computed(() => {
+    const value = total.value ? Math.floor((uploaded.value / total.value) * 100) : 0;
+    return Number.isNaN(value) ? 0 : value;
+});
+
+const success = computed(() => finishedUploading.value && !error.value);
+
+function openFileSelector() {
+    inputRef.value?.click();
+}
+
+function inputRefMethod() {
+    return inputRef.value;
+}
+
+function revokeCropUrl() {
+    if (cropImageUrl.value) {
+        URL.revokeObjectURL(cropImageUrl.value);
+        cropImageUrl.value = null;
+    }
+}
+
+watch(cropDialogOpen, (open) => {
+    if (!open) {
+        revokeCropUrl();
+        file.value = null;
+        cropperReady.value = false;
+    } else {
+        cropperReady.value = true;
+    }
+});
+
+async function onFileAdd(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const selectedFile = target.files?.[0];
+    target.value = "";
+
+    error.value = null;
+    file.value = selectedFile ?? null;
+
+    if (!selectedFile) return;
+
+    if (props.validateFile) {
+        try {
+            const msg = await props.validateFile(selectedFile);
+            if (msg) {
+                error.value = msg;
+                return;
+            }
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : "Validation failed";
+            return;
+        }
+    }
+
+    revokeCropUrl();
+    cropImageUrl.value = URL.createObjectURL(selectedFile);
+    pendingFileName.value = selectedFile.name;
+    cropperReady.value = false;
+    cropDialogOpen.value = true;
+}
+
+function onResetCrop() {
+    cropperRef.value?.reset();
+}
+
+async function onCropAndUpload() {
+    const cropper = cropperRef.value;
+    if (!cropper || !cropImageUrl.value) return;
+
+    let result: { canvas?: HTMLCanvasElement };
+    try {
+        result = cropper.getResult();
+    } catch {
+        error.value = "Failed to get crop result";
+        return;
+    }
+
+    const canvas = result.canvas;
+    if (!canvas) {
+        error.value = "Cropper did not return a canvas";
+        return;
+    }
+
+    cropDialogOpen.value = false;
+    revokeCropUrl();
+
+    const blob = await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob(resolve, "image/png", 1);
+    });
+
+    if (!blob) {
+        error.value = "Failed to create image blob";
+        return;
+    }
+
+    const croppedFile = new File([blob], pendingFileName.value.replace(/\.[^.]+$/, "") + ".png", {
+        type: "image/png",
+    });
+
+    uploadFile(croppedFile);
+}
+
+function uploadFile(fileToUpload: File) {
+    error.value = null;
+    uploaded.value = 0;
+    total.value = 0;
+    finishedUploading.value = false;
+
+    const uploader = new FileUploadHandler();
+    uploader.on("start", () => {
+        uploading.value = true;
+    });
+    uploader.on("progress", (data: { uploaded: number; total: number }) => {
+        uploaded.value = data.uploaded;
+        total.value = data.total;
+    });
+    uploader.on("error", () => {
+        uploading.value = false;
+        error.value = "Error Uploading File";
+    });
+    uploader.on("finish", () => {
+        uploading.value = false;
+        finishedUploading.value = true;
+    });
+
+    uploader
+        .upload(fileToUpload, props.uploadArgs ?? {})
+        .then((data: UploadedFile) => {
+            emit("success", data);
+        })
+        .catch((err: unknown) => {
+            uploading.value = false;
+            let errorMessage = "Error Uploading File";
+            const errorObj = err as { _server_messages?: string; exc?: string };
+            if (errorObj?._server_messages) {
+                try {
+                    const parsed = JSON.parse(JSON.parse(errorObj._server_messages)[0]);
+                    if (parsed?.message) errorMessage = parsed.message;
+                } catch {
+                    // keep default
+                }
+            } else if (errorObj?.exc) {
+                try {
+                    const lines = JSON.parse(errorObj.exc)[0]?.split("\n") ?? [];
+                    const last = lines.slice(-2, -1)[0];
+                    if (last) errorMessage = last;
+                } catch {
+                    // keep default
+                }
+            }
+            error.value = errorMessage;
+            emit("failure", err);
+        });
+}
+
+defineExpose({
+    openFileSelector,
+    inputRef: inputRefMethod,
+});
+</script>
+
+<style scoped>
+.cropper-container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    height: 360px;
+    overflow: hidden;
+    background: var(--color-surface-gray-1, #f3f4f6);
+    border-radius: 0.375rem;
+}
+.cropper-container :deep(.cropper),
+.cropper-container :deep(.vue-advanced-cropper) {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100%;
+    background: var(--color-surface-gray-1, #f3f4f6);
+}
+</style>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7fc549c..4c9425d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1482,7 +1482,7 @@ chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -1600,6 +1600,11 @@ dayjs@^1.11.19:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.19.tgz#15dc98e854bb43917f12021806af897c58ae2938"
   integrity sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==
 
+debounce@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
 debug@4, debug@^4.1.1, debug@^4.3.4, debug@^4.3.7, debug@^4.4.0, debug@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.1.tgz#e5a8bc6cbc4c6cd3e64308b0693a3d4fa550189b"
@@ -1684,6 +1689,11 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
+easy-bem@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
+  integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
+
 echarts@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
@@ -3597,6 +3607,15 @@ vscode-uri@^3.0.8:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.1.0.tgz#dd09ec5a66a38b5c3fffc774015713496d14e09c"
   integrity sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==
 
+vue-advanced-cropper@^2.6.2:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz#119ec7ade91dcf80fb22940ecbbf265ad0ae1bc4"
+  integrity sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==
+  dependencies:
+    classnames "^2.2.6"
+    debounce "^1.2.0"
+    easy-bem "^1.0.2"
+
 vue-demi@>=0.13.0, vue-demi@>=0.14.8:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"

From 03f3dc259926afb19b88ea5a1c9a7717edc3e923 Mon Sep 17 00:00:00 2001
From: Harsh Tandiya <harsh.tandiya@gmail.com>
Date: Sat, 7 Mar 2026 22:15:59 +0530
Subject: [PATCH 2/2] feat: integrate ImageUploader for team logo management

- Replaced the existing logo upload button with an ImageUploader component for enhanced functionality.
- Added error handling and upload progress display within the ImageUploader.
- Updated the button label dynamically based on the upload state and existing logo presence.
---
 .../src/components/team/ManageTeamHeader.vue  | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/team/ManageTeamHeader.vue b/frontend/src/components/team/ManageTeamHeader.vue
index 71e5733..051f9d5 100644
--- a/frontend/src/components/team/ManageTeamHeader.vue
+++ b/frontend/src/components/team/ManageTeamHeader.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TeamLogo from "@/components/team/TeamLogo.vue";
-import { Button } from "frappe-ui";
+import ImageUploader from "@/components/ImageUploader/ImageUploader.vue";
+import { Button, ErrorMessage } from "frappe-ui";
 import { useTeam } from "@/stores/team";
 import { EditableArea, EditableInput, EditablePreview, EditableRoot } from "reka-ui";
 import { ref, watch } from "vue";
@@ -29,11 +30,28 @@ function onSubmit() {
                 :team-name="teamStore.currentTeam!.team_name"
                 :logo-url="teamStore.currentTeam?.logo ?? null"
             />
-            <Button
-                :label="teamStore.currentTeam?.logo ? 'Change' : 'Upload Logo'"
-                icon-left="upload"
-                variant="outline"
-            />
+            <ImageUploader
+                :crop-dimensions="{ width: 400, height: 400 }"
+                :upload-args="{ folder: 'Home' }"
+                @success="(file) => teamStore.save({ logo: file.file_url })"
+            >
+                <template #default="{ uploading, progress, error, openFileSelector }">
+                    <ErrorMessage :message="error ?? undefined" />
+                    <Button
+                        :label="
+                            teamStore.currentTeam?.logo
+                                ? 'Change'
+                                : uploading
+                                ? `Uploading ${progress}%`
+                                : 'Upload Logo'
+                        "
+                        icon-left="upload"
+                        variant="outline"
+                        :loading="uploading"
+                        @click="openFileSelector"
+                    />
+                </template>
+            </ImageUploader>
         </div>
         <div class="flex pt-4">
             <EditableRoot