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>