resources/js/Components/Form/ImageUpload.vue

​
Props

Use props to style the look of the component:

​
Image

image?: string Uploaded image. placeholder?: string Placeholder when there’s no image. Defaults to /img/placeholder.svg accept?: string Input file accept attribute. Defaults to image/*. isIcon?: boolean Set as true for icon uploads. For icon uploads default accept value is image/png,image/svg+xml

​
Button label

btnLabel?: string Label for image select button. Defaults to “Upload image”.

​
ID

id?: HTMLAttributes["id"] ID of the file input.

​
Class

class?: HTMLAttributes["class"] Style the wrapper.

​
On file change event

When you select/upload an image, it will trigger the default change event which will display uploaded image and emit custom changed with file data. You can use this event to update your form. 
<ImageUpload @changed="(file: File) => (form.image = file)" />

​
Example

You can render default component or customize it using the Vue slots.

​
Default

// form.image is prop in Inertia useForm()
// post?.image is uploaded image of the post (when updating)
<ImageUpload
    @changed="(file: File) => (form.image = file)"
    :image="post?.image"
/>

​
Slots

// form.image is prop in Inertia useForm()
// input in trigger slot is HTMLInputElement reference
// image in preview slot is selected file base64 string
// placeholder is default image placeholder when image is null
<ImageUpload
    class="flex items-center gap-x-2"
    @changed="(file: File) => form.image = file"
>
    <template v-slot:trigger="{ input }">
        <Button
            type="button"
            variant="ghost"
            size="xs"
            @click="input?.click()"
        >
            {{ $t("Upload avatar") }}
        </Button>
    </template>

    <template v-slot:preview="{ image, placeholder }">
        <img class="size-12 rounded-full object-cover" :src="image || placeholder" />
    </template>
</ImageUpload>