codingo-me / dropzoner
Simpe Laravel package for image uploads using DropzoneJS library
Installs: 8 857
Dependents: 1
Suggesters: 0
Security: 0
Stars: 45
Watchers: 6
Forks: 14
Open Issues: 2
Requires
- php: >=5.4.0
- intervention/image: ^2.3
This package is not auto-updated.
Last update: 2023-02-15 15:20:54 UTC
README
This is the simplest Laravel package for image uploads using DropzoneJS.
You pull it via composer, set service provider and include it in your views with @include('dropzoner::dropzone'). After this you need to set JS and CSS files in header and footer. Dropzone will take full width of parent container, and will throw events on image upload and image delete actions. Using event listeners you can hook this package with the rest of your application.
Package uses Image Intervention library for saving images. It has its own filename sanitizer and method for creating unique filenames inside upload directory.
Guide
Require package in your Laravel project with:
composer require codingo-me/dropzoner
Now modify app.php config file and add Dropzoner Service Provider.
Codingo\Dropzoner\DropzonerServiceProvider::class
After setting service provider you need to publish Dropzoners configuration file and assets:
php artisan vendor:publish
When you publish these files, you will be able to modify Dropzoner configuration. There you'll find validator array and validator-messages array.
You also need to add upload path into .env file using key DROPZONER_UPLOAD_PATH. This directory should be write-able by web server, and it needs to end with trailing slash.
Namespace
Package uses Codingo\Dropzoner namespace.
Assets
In head section of your page add DropzoneJS stylesheet file.
<link rel="stylesheet" href="<?php echo asset('vendor/dropzoner/dropzone/dropzone.min.css'); ?>">
Above body closing tag add DropzoneJS JavaScript file, jQuery library and DropzoneJS custom configuration file. We are using jQuery file in custom configuration file, for AJAX requests to backend.
<script src="<?php echo asset('vendor/dropzoner/dropzone/dropzone.min.js'); ?>"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="<?php echo asset('vendor/dropzoner/dropzone/config.js'); ?>"></script>
Including DropzoneJS upload widget
You can include DropzoneJS widget in your HTML with:
@include('dropzoner::dropzone')
It will take full-width of parent div. That view consists of upload form and preview template.
Removal
By default each uploaded image will have Remove link. You can disable this feature once when you publish configuration file.
Events
Idea behind this package is to have plug and play functionality, but you may need to hook upload and delete action with your application so we have 2 events.
- ImageWasUploaded
- ImageWasDeleted
ImageWasUploaded has 2 properties: $original_filename and $server_filename ImageWasDeleted has 1 property: $server_filename
Example Listener
This is a simple listener for ImageWasUploaded events.
<?php namespace App\Listeners; use Codingo\Dropzoner\Events\ImageWasUploaded; class ImageUploadListener { /** * Example listener for image uploads * Event carries original_filename * and server_filename * * @param ImageWasUploaded $event */ public function handle(ImageWasUploaded $event) { \Log::info('Inside ImageUploadListener, image was uploaded: ' . $event->server_filename); } }
License
MIT License (MIT). See License File for more information.