vue3-image-crop-upload

Vue Image Uploader

VueCropUpload is a Vue 3 component that provides image uploading functionality with built-in cropping capabilities. It allows users to select an image file, crop it, and upload it to a specified URL.

This component uses Cropper.js, a powerful JavaScript image cropping library.

Features

• Vue 3 component for image uploading with built-in cropping functionality
• Integrates Cropper.js for powerful image cropping capabilities
• Customizable file type restrictions
• Configurable maximum file size limit
• Custom headers and additional data support for upload requests
• Adjustable aspect ratio for image cropping
• Progress tracking for upload process
• Error handling for various upload scenarios
• Responsive design suitable for various screen sizes
• Easy to integrate with existing Vue 3 projects
• Lightweight and performant
• Fully typed for TypeScript projects

Installation

npm install vue-crop-upload

import { VueCropUpload } from 'vue-crop-upload'
import 'vue-crop-upload/dist/style.css'

Usage

<template>
  <VueCropUpload
    :url="uploadUrl"
    :extensions="allowedExtensions"
    :headers="headers"
    :data="additionalData"
    :maxFileSize="maxSize"
    :aspectRatio="cropAspectRatio"
    @error="handleError"
    @success="handleSuccess"
  >
    <template #default="{ activator, progress, loading }">
      <button @click="activator" :disabled="loading">
        {{ loading ? `Uploading (${progress}%)` : 'Upload Image' }}
      </button>
    </template>
  </VueCropUpload>
</template>

<script>
export default {
  methods: {
    handleSuccess({ data }) {
      console.log('Upload successful:', data)
    },
    handleError(error) {
      console.error('Upload error:', error.message)
    }
  }
}
</script>

Props

Prop	Type	Default	Description
url	string	-	The URL to upload the image to (required)
extensions	string	'png,jpg,gif,jpeg'	Comma-separated list of allowed file extensions
headers	object	{}	Additional headers to send with the upload request
data	object	{}	Additional data to send with the upload request
ratio	number	-	Aspect ratio for image cropping
maxFileSize	number	-	Maximum file size in bytes

Events

Event	Payload	Description
success	response	Emitted when the upload is successful
error	error	Emitted when an error occurs during upload or validation

Slots

The component provides a default slot that exposes the following properties:

• activator: Function to trigger the file selection dialog
• progress: Number representing the upload progress (0-100)
• loading: Boolean indicating whether an upload is in progress

Use these properties to create your custom upload button UI.

Development

To set up the project for development:

1. Clone the repository
2. Install dependencies: npm install
3. Start the development server: npm run dev

Types

interface ErrorEvent {
  type: 'INVALID_FILE_EXTENSION' | 'FILE_SIZE_EXCEEDED' | 'UPLOAD_ERROR' | 'INVALID_FILE_TYPE';
  message: string;
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Dependencies

This project uses the following major dependencies:

• Vue 3: The progressive JavaScript framework
• Cropper.js: A simple JavaScript image cropper

License

This project is licensed under the MIT License.

Credits

• Image cropping functionality is provided by Cropper.js, created by Chen Fengyuan.

• This is a Vue 3 implementation inspired by the concept of vue-image-crop-upload, but built from the ground up for Vue 3