refactor: clean up ImageUploader component and improve label handling

frontend/src/components/Controls/ImageUploader.vue

@@ -1,7 +1,6 @@
 <template>
   <FileUploader
     :file-types="image_type"
-    class="text-base"
     @success="
       (file) => {
         $emit('upload', file.file_url)
@@ -10,21 +9,28 @@
   >
     <template v-slot="{ progress, uploading, openFileSelector }">
       <div class="flex items-end space-x-1">
-        <Button @click="openFileSelector">
-          {{
+        <Button
+          @click="openFileSelector"
+          :iconLeft="uploading ? 'cloud-upload' : ImageUpIcon"
+          :label="
             uploading
-              ? `Uploading ${progress}%`
+              ? __('Uploading {0}%', [progress])
               : image_url
-                ? 'Change'
-                : 'Upload'
-          }}
-        </Button>
-        <Button v-if="image_url" @click="$emit('remove')">Remove</Button>
+                ? __('Change')
+                : __('Upload')
+          "
+        />
+        <Button
+          v-if="image_url"
+          :label="__('Remove')"
+          @click="$emit('remove')"
+        />
       </div>
     </template>
   </FileUploader>
 </template>
 <script setup>
+import ImageUpIcon from '~icons/lucide/image-up'
 import { FileUploader, Button } from 'frappe-ui'
 
 const prop = defineProps({
@@ -33,10 +39,6 @@ const prop = defineProps({
     type: String,
     default: 'image/*',
   },
-  label: {
-    type: String,
-    default: '',
-  },
 })
 const emit = defineEmits(['upload', 'remove'])
 </script>