refactor: clean up ImageUploader component and improve label handling

This commit is contained in:
Shariq Ansari 2025-09-16 16:55:56 +05:30
parent a52bfee98d
commit e19f750831

View File

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