PHPackages mainul12501/drag-drop-crop-image-upload - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. mainul12501/drag-drop-crop-image-upload ActiveLibrary[Image & Media](/categories/media) mainul12501/drag-drop-crop-image-upload ======================================= Laravel drag, drop, and crop image upload widget. v1.0.3(4mo ago)00MITJavaScriptPHP ^8.1 Since Jan 4Pushed 4mo agoCompare [ Source](https://github.com/Mainul12501/drag-drop-crop-image-upload)[ Packagist](https://packagist.org/packages/mainul12501/drag-drop-crop-image-upload)[ RSS](/packages/mainul12501-drag-drop-crop-image-upload/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (1)Versions (5)Used By (0) Drag Drop Crop Image Upload =========================== [](#drag-drop-crop-image-upload) A Laravel package that provides an elegant drag-and-drop image upload widget with built-in cropping functionality. Perfect for profile pictures, avatars, and any image upload that requires user-controlled cropping. [![Latest Version on Packagist](https://camo.githubusercontent.com/4b0c395371c2a4427d5f16b9677826f900d663128c7954fa1c33c45021e9f627/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d61696e756c31323530312f647261672d64726f702d63726f702d696d6167652d75706c6f61642e737667)](https://packagist.org/packages/mainul12501/drag-drop-crop-image-upload)[![License](https://camo.githubusercontent.com/8567491014d59ddab6e5d9fb7318f0d24c0ba7fab073781eff55afa449774423/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d61696e756c31323530312f647261672d64726f702d63726f702d696d6167652d75706c6f61642e737667)](https://packagist.org/packages/mainul12501/drag-drop-crop-image-upload) Features -------- [](#features) - Drag & drop image upload - Interactive image cropping with [Cropper.js](https://fengyuanchen.github.io/cropperjs/) - Image rotation (90° left/right) - Configurable aspect ratio, dimensions, and quality - Base64 to file conversion with automatic format detection - Bootstrap modal integration support - Customizable labels and UI text - Auto-cleanup of old images on re-upload Requirements ------------ [](#requirements) RequirementVersionPHP8.1 - 8.5Laravel11.x, 12.xInstallation ------------ [](#installation) ### Via Composer (Packagist) [](#via-composer-packagist) ``` composer require mainul12501/drag-drop-crop-image-upload ``` Publish the assets and configuration: ``` php artisan vendor:publish --tag=drag-drop-crop-assets php artisan vendor:publish --tag=drag-drop-crop-config ``` ### Local Development [](#local-development) Add to your main app's `composer.json`: ``` { "repositories": [ { "type": "path", "url": "packages/drag-drop-crop-image-upload" } ], "require": { "mainul/drag-drop-crop-image-upload": "*" } } ``` Then run: ``` composer update php artisan vendor:publish --tag=drag-drop-crop-assets php artisan vendor:publish --tag=drag-drop-crop-config ``` Quick Start ----------- [](#quick-start) ### 1. Render the Widget in Your Blade View [](#1-render-the-widget-in-your-blade-view) ``` {!! DragDropCrop::generateUpload('profile_image') !!} ``` ### 2. Handle the Upload in Your Controller [](#2-handle-the-upload-in-your-controller) ``` use DragDropCropImageUpload\Facades\DragDropCrop; public function store(Request $request) { $imagePath = DragDropCrop::uploadFromBase64( $request->input('profile_image'), 'uploads/avatars' ); // Save $imagePath to your database User::create([ 'avatar' => $imagePath, // ... other fields ]); } ``` Usage ----- [](#usage) ### Basic Usage [](#basic-usage) ``` {!! DragDropCrop::generateUpload('field_name') !!} ``` ### With Custom Options [](#with-custom-options) ``` {!! DragDropCrop::generateUpload('profile_image', [ 'aspect_ratio' => 1, // 1:1 square (use 16/9 for widescreen) 'crop_width' => 300, // Output width in pixels 'crop_height' => 300, // Output height in pixels 'max_size_mb' => 5, // Maximum file size in MB 'quality' => 0.8, // JPEG quality (0.1 to 1.0) ]) !!} ``` ### Inside Bootstrap Modal [](#inside-bootstrap-modal) ``` {!! DragDropCrop::generateUpload('avatar', [ 'modal_id' => 'profileModal', // Resets widget when modal closes ]) !!} ``` ### Custom Labels [](#custom-labels) ``` {!! DragDropCrop::generateUpload('photo', [ 'labels' => [ 'title' => 'Upload Your Photo', 'browse' => 'Click to select', 'supports' => 'JPG, PNG (Max 10MB)', 'cropped_title' => 'Preview:', 'change' => 'Choose Different', 'reset' => 'Start Over', 'rotate_left' => 'Rotate Left', 'rotate_right' => 'Rotate Right', 'crop' => 'Crop & Save', ], ]) !!} ``` API Reference ------------- [](#api-reference) ### `DragDropCrop::generateUpload(string $inputName, array $options = [])` [](#dragdropcropgenerateuploadstring-inputname-array-options--) Renders the drag-drop-crop widget. **Parameters:** ParameterTypeDescription`$inputName`stringName attribute for the hidden input containing cropped base64 data`$options`arrayConfiguration options (see below)**Options:** OptionTypeDefaultDescription`id`stringauto-generatedUnique widget identifier`file_input_name`string`{inputName}_file`Name for the file input element`aspect_ratio`float`1`Width/height ratio (1 = square, 16/9 = widescreen)`crop_width`int`300`Output image width in pixels`crop_height`int`300`Output image height in pixels`max_size_mb`int`5`Maximum allowed file size in MB`quality`float`0.8`JPEG compression quality (0.1 - 1.0)`modal_id`string`null`Bootstrap modal ID for auto-reset on close`labels`array`[]`Custom UI text labels**Returns:** `Illuminate\Support\HtmlString` --- ### `DragDropCrop::uploadFromBase64(?string $base64String, ?string $directory, ?string $namePrefix, ?string $existingPath)` [](#dragdropcropuploadfrombase64string-base64string-string-directory-string-nameprefix-string-existingpath) Converts base64 image data to a file and saves it. **Parameters:** ParameterTypeDefaultDescription`$base64String`string|null-Base64-encoded image data from the widget`$directory`string|nullconfig valueUpload directory relative to `public/``$namePrefix`string|null`null`Prefix for the generated filename`$existingPath`string|null`null`Path to existing image (will be deleted)**Returns:** `string|null` - Relative path to the uploaded file, or `$existingPath` if no new upload **Example with all parameters:** ``` $path = DragDropCrop::uploadFromBase64( $request->input('profile_image'), // Base64 from form 'uploads/users', // Save to public/uploads/users/ 'user_' . $user->id, // Prefix: user_123_... $user->current_avatar // Delete old avatar ); ``` **Generated filename format:** `{prefix}_{timestamp}_{random}.{ext}` Example: `user_123_1704067200_a1b2c3d4e5.jpg` Configuration ------------- [](#configuration) After publishing, edit `config/drag-drop-crop.php`: ``` return [ // Default upload directory (relative to public/) 'upload_directory' => 'frontend/auth', // Default aspect ratio (1 = square) 'aspect_ratio' => 1, // Default crop dimensions 'crop_width' => 300, 'crop_height' => 300, // Maximum file size in MB 'max_size_mb' => 5, // JPEG compression quality (0.1 - 1.0) 'quality' => 0.8, // Published assets path 'asset_path' => 'vendor/drag-drop-crop', ]; ``` Complete Example ---------------- [](#complete-example) ### Blade View (create-profile.blade.php) [](#blade-view-create-profilebladephp) ``` @csrf Profile Picture {!! DragDropCrop::generateUpload('avatar', [ 'aspect_ratio' => 1, 'crop_width' => 400, 'crop_height' => 400, 'max_size_mb' => 10, 'quality' => 0.9, 'labels' => [ 'title' => 'Drop your photo here', 'supports' => 'JPG, PNG, GIF (Max 10MB)', ], ]) !!} Name Save Profile ``` ### Controller (ProfileController.php) [](#controller-profilecontrollerphp) ```