From 0486842bc803e0d6437ff6dd9a85779816db288f Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Tue, 24 Mar 2026 14:51:09 +0530
Subject: [PATCH] fix: show error if upload fails

---
 frontend/src/components/Controls/Uploader.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/Uploader.vue b/frontend/src/components/Controls/Uploader.vue
index 1f6ec5ee..9762b81c 100644
--- a/frontend/src/components/Controls/Uploader.vue
+++ b/frontend/src/components/Controls/Uploader.vue
@@ -9,6 +9,7 @@
 			:fileTypes="[fileType]"
 			:validateFile="(file: File) => validateFile(file, true, type)"
 			@success="(file: File) => saveFile(file)"
+			@failure="onUploadFailure"
 		>
 			<template v-slot="{ file, progress, uploading, openFileSelector }">
 				<div class="flex items-center">
@@ -19,8 +20,8 @@
 						/>
 					</div>
 					<div class="ml-4">
-						<Button @click="openFileSelector">
-							{{ __('Upload') }}
+						<Button @click="openFileSelector" :loading="uploading">
+							{{ uploading ? `${__('Uploading')} ${progress}%` : __('Upload') }}
 						</Button>
 						<div class="mt-1 text-ink-gray-5 text-sm leading-5">
 							{{ __(description) }}
@@ -62,7 +63,7 @@
 </template>
 <script setup lang="ts">
 import { validateFile } from '@/utils'
-import { Button, FileUploader } from 'frappe-ui'
+import { Button, FileUploader, toast } from 'frappe-ui'
 import { Image, Video } from 'lucide-vue-next'
 import { computed } from 'vue'
 
@@ -100,4 +101,14 @@ const saveFile = (file: any) => {
 const removeImage = () => {
 	emit('update:modelValue', '')
 }
+
+const onUploadFailure = (error: any) => {
+	let message = __('Error Uploading File')
+	if (error?._server_messages) {
+		message = JSON.parse(JSON.parse(error._server_messages)[0]).message
+	} else if (error?.exc) {
+		message = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
+	}
+	toast.error(message)
+}
 </script>