UploadImage Component

The UploadImage component provides an image cropping interface in a modal window. It allows users to upload an image, adjust the crop area using drag and resize handles, and confirm the cropped result as a base64 image.

Props

Prop Name	Type	Default	Description
show	boolean	false	Controls visibility of the modal.
uploadSize	number	2	Maximum allowed image size in MB.

Emits

Event Name	Payload	Description
onClose	—	Emitted when the modal is closed.
onCancel	—	Emitted when the cancel button is clicked.
onReset	—	Emitted when the reset button is clicked.
onCrop	string	Emitted when the crop is confirmed. The payload is a base64 image string.

Slots

This component does not use any slots.

Usage Example

<template>
  <UploadImageModal
    :show="showModal"
    @onClose="showModal = false"
    @onCrop="handleCrop"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UploadImageModal from '@/components/UploadImageModal.vue';

const showModal = ref(false);

const handleCrop = (croppedImage: string) => {
  console.log('Cropped Image:', croppedImage);
  showModal.value = false;
};
</script>

Screenshot

Notes

• Only PNG, JPG, JPEG, and WebP files are supported.
• Minimum crop size is 50px by 50px.
• Cropping box cannot exceed image boundaries.
• Drag to move the crop box; use corner handles to resize.
• Optional zoom functionality is available but commented out.