PHPackages tomshaw/mediable - 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. [File & Storage](/categories/file-storage) 4. / 5. tomshaw/mediable ActiveLibrary[File & Storage](/categories/file-storage) tomshaw/mediable ================ A comprehensive Laravel Livewire Media Manager. v1.3.0(1mo ago)20391[2 PRs](https://github.com/tomshaw/mediable/pulls)MITBladePHP ^8.5CI passing Since Jan 23Pushed 2mo ago1 watchersCompare [ Source](https://github.com/tomshaw/mediable)[ Packagist](https://packagist.org/packages/tomshaw/mediable)[ Docs](https://github.com/tomshaw/mediable)[ RSS](/packages/tomshaw-mediable/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (20)Versions (109)Used By (0) Mediable πŸŽ₯πŸ“ΈπŸŽ΅πŸ“‚ ============= [](#mediable-) Mediable is a light weight easy to use Laravel Livewire Media Manager. Mediable is awesome for injecting content into blog posts, carousels, product previews or similar applications. [![GitHub Workflow Status](https://camo.githubusercontent.com/71ba849ad01a22977647bf1de13357a6bfe0ae9fae571823fc8c86b94c55f927/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f746f6d736861772f6d65646961626c652f72756e2d74657374732e796d6c3f6272616e63683d6d6173746572267374796c653d666c61742d737175617265266c6162656c3d7465737473)](https://camo.githubusercontent.com/71ba849ad01a22977647bf1de13357a6bfe0ae9fae571823fc8c86b94c55f927/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f746f6d736861772f6d65646961626c652f72756e2d74657374732e796d6c3f6272616e63683d6d6173746572267374796c653d666c61742d737175617265266c6162656c3d7465737473)[![issues](https://camo.githubusercontent.com/cf40c87d3a0e3c398733457eef5f49f0ad6bc01c8df6e5351fd05f9a67d5000f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f746f6d736861772f6d65646961626c653f7374796c653d666c6174266c6f676f3d6170707665796f72)](https://camo.githubusercontent.com/cf40c87d3a0e3c398733457eef5f49f0ad6bc01c8df6e5351fd05f9a67d5000f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f746f6d736861772f6d65646961626c653f7374796c653d666c6174266c6f676f3d6170707665796f72)[![forks](https://camo.githubusercontent.com/780cdc4172549c0b8e8c9f380ce110f75a4605bde1f70da1d31c70753e88153c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f746f6d736861772f6d65646961626c653f7374796c653d666c6174266c6f676f3d6170707665796f72)](https://camo.githubusercontent.com/780cdc4172549c0b8e8c9f380ce110f75a4605bde1f70da1d31c70753e88153c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f746f6d736861772f6d65646961626c653f7374796c653d666c6174266c6f676f3d6170707665796f72)[![stars](https://camo.githubusercontent.com/37fb3ad666a5f4c2a48de8ac8e210bf8ead499edc5c16ebc5ad0a4f15fcb088f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f746f6d736861772f6d65646961626c653f7374796c653d666c6174266c6f676f3d6170707665796f72)](https://camo.githubusercontent.com/37fb3ad666a5f4c2a48de8ac8e210bf8ead499edc5c16ebc5ad0a4f15fcb088f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f746f6d736861772f6d65646961626c653f7374796c653d666c6174266c6f676f3d6170707665796f72)[![GitHub license](https://camo.githubusercontent.com/b571202b9b5f7488c5c4a2459798174c337a30fd04890db9e63dc2a8dd40c998/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f746f6d736861772f6d65646961626c65)](https://github.com/tomshaw/mediable/blob/master/LICENSE) Requirements ------------ [](#requirements) - PHP 8.3, 8.4, or 8.5 - Laravel 12.x - Livewire 4.x #### Screenshot [](#screenshot) [![Mediable](https://camo.githubusercontent.com/8fcb4fe0e090f4c4c9bde2a18693ce90d787210148fc087d497d6c0b652c14d9/68747470733a2f2f7261772e6769746875622e636f6d2f746f6d736861772f6d65646961626c652f6d61737465722f646f63732f6d65646961626c652e6a7067)](https://camo.githubusercontent.com/8fcb4fe0e090f4c4c9bde2a18693ce90d787210148fc087d497d6c0b652c14d9/68747470733a2f2f7261772e6769746875622e636f6d2f746f6d736861772f6d65646961626c652f6d61737465722f646f63732f6d65646961626c652e6a7067) Features -------- [](#features) - **Easy Integration**: Seamlessly integrate Mediable into your Laravel Livewire applications. - **File Uploads**: Supports uploading various file types including images, videos, and documents. - **Image Conversion**: Automatically create WebP and AVIF versions of your image uploads. - **Customizable**: Configure allowable file types, maximum file size, storage disk, and folder. - **SEO-Friendly**: Generate SEO-friendly file names for your uploads. - **Event Handling**: Dispatch events to handle selected attachments and other actions. - **Database Integration**: Store upload information in the database with the included migration. - **Graphic Draw**: Perform various image manipulations using the GD Library. Installation ------------ [](#installation) You can install the package via composer: ``` composer require tomshaw/mediable ``` Mediable comes with both install and update commands. ``` php artisan mediable:install ``` ``` php artisan mediable:update ``` Run the included database migration. > This creates an attachments table that stores upload information. ``` php artisan migrate ``` Add Mediable styles and scripts directives to your layout. ``` @vite(['resources/css/app.css', 'resources/js/app.js']) @mediableStyles @mediableScripts ``` Make sure your `.env` `APP_URL` is correctly set. ``` APP_URL=https://mydomain.com ``` Finally make uploaded files accessible from the web. ``` php artisan storage:link ``` Usage ----- [](#usage) Add the Mediable component to your blade template. > Boolean options can be provided by only specifying the key. ``` ``` Launching Mediable is done by dispatching the `mediable.open` event. > This is typically executed with a button click. ``` $this->dispatch('mediable.open'); ``` Insert attachments directly into form inputs using PHP 8 named parameters. > This example launches the modal with the intention of injecting attachments directly into an html input that has an `id` of `description`. ``` $this->dispatch('mediable.open', id: 'description'); ``` Use the `mediable.on` event to handle selected attachments. ``` on(['mediable.on' => function ($files) { // Handle selected files... }]); ``` Validation ---------- [](#validation) You can customize allowable file types and max file size in the `mediable.php` config file. ``` 'validation' => [ 'files.*' => 'required|mimes:jpeg,png,jpg,gif,mp3,mp4,m4a,ogg,wav,webm,avi,mov,wmv,txt,pdf,doc,docx,xls,xlsx,ppt,pptx,zip,rar|max:10240', ], ``` The `mimes` rule specifies the allowable file types. To add a new file type, simply add its mime type to the list. For example, to allow SVG files, you would change it to: ``` 'mimes:jpeg,png,jpg,gif,mp3,mp4,m4a,ogg,wav,webm,avi,mov,wmv,txt,pdf,doc,docx,xls,xlsx,ppt,pptx,zip,rar,svg' ``` The `max` rule specifies the maximum file size, in kilobytes. To change the maximum file size, simply change the number. For example, to allow files up to 50MB, you would change it to: ``` 'max:51200' ``` Storage Disk ------------ [](#storage-disk) You can configure the storage disk used for file uploads in the `mediable.php` config file. The `disk` option is used to specify the disk name: ``` 'disk' => env('MEDIABLE_DISK_DRIVER', 'public'), ``` The value of `disk` is the key of `disks` in your Laravel application's `config/filesystems.php` file. By default, it uses the disk specified by the `FILESYSTEM_DRIVER` environment variable, or 'public' if the environment variable is not set. You can change the `disk` option to use a different disk for file uploads. For example, to use the 's3' disk, you can set `disk` to 's3': ``` 'disk' => 's3', ``` Remember to configure the chosen disk correctly in your `config/filesystems.php` file and to clear your config cache after making changes by running `php artisan config:clear` in your terminal. Disk Folder ----------- [](#disk-folder) You can configure the folder used for file uploads on the specified disk. This configuration allows you to organize and manage and your uploaded files. ``` 'folder' => env('MEDIABLE_DISK_FOLDER', 'uploads'), ``` GD Library Graphic Draw ----------------------- [](#gd-library-graphic-draw) Mediable includes a set of tools for performing various image manipulations using the GD Library. Here are some of the things you can do: - **Flip Image**: Flip the image horizontally or vertically. - **Scale Image**: Resize the image while maintaining the aspect ratio. - **Apply Filters**: Apply various filters such as contrast, brightness, colorize, smooth, and pixelate. - **Rotate Image**: Rotate the image by a specified angle with a background color. - **Crop Image**: Crop the image to a specified rectangle. - **Add Text**: Add text to the image with specified font, size, color, and angle. Image Conversion Settings ------------------------- [](#image-conversion-settings) Mediable can automatically create WebP and AVIF versions of your image uploads. You can control this behavior with the following environment variables: - `MEDIABLE_CREATE_WEBP`: Set this to `true` to create a WebP version of each image upload, or `false` to disable this feature. By default, this is set to `true`. - `MEDIABLE_CREATE_AVIF`: Set this to `true` to create an AVIF version of each image upload, or `false` to disable this feature. By default, this is set to `true`. You can also control the quality of the WebP and AVIF versions with the following environment variables: - `MEDIABLE_WEBP_QUALITY`: Set this to any integer between 0 and 100 to control the quality of the WebP versions. A higher number means better quality but larger file size. By default, this is set to 80. - `MEDIABLE_AVIF_QUALITY`: Set this to any integer between 0 and 100 to control the quality of the AVIF versions. A higher number means better quality but larger file size. By default, this is set to 80. Here's an example of how you might set these environment variables in your `.env` file: ``` MEDIABLE_CREATE_WEBP=true MEDIABLE_CREATE_AVIF=true MEDIABLE_WEBP_QUALITY=80 MEDIABLE_AVIF_QUALITY=80 ``` Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. License ------- [](#license) The MIT License (MIT). See [License File](LICENSE) for more information. ``` _ _ _ _ /\/\ ___ __| (_) __ _| |__ | | ___ / \ / _ \/ _` | |/ _` | '_ \| |/ _ \ / /\/\ \ __/ (_| | | (_| | |_) | | __/ \/ \/\___|\__,_|_|\__,_|_.__/|_|\___| ``` ### Health Score 51 β€” FairBetter than 96% of packages Maintenance89 Actively maintained with recent releases Popularity16 Limited adoption so far Community10 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 99.3% of commits β€” single point of failure How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~8 days Recently: every ~14 days Total 104 Last Release 43d ago Major Versions v0.12.3 β†’ v1.0.02026-02-08 PHP version history (6 changes)v0.1.0PHP ^8.2 v0.1.2PHP ^8.1 v0.5.2PHP ^8.1|^8.2|^8.3|^8.4 v0.6.0PHP ^8.2|^8.3|^8.4 v0.8.0PHP ^8.3|^8.4|^8.5 v1.0.1PHP ^8.5 ### Community Maintainers ![](https://www.gravatar.com/avatar/14fd02efdbaf6247b61c9846697c86dabcbf430374aeff0d80e509d95d186658?d=identicon)[Tom Shaw](/maintainers/Tom%20Shaw) --- Top Contributors [![tomshaw](https://avatars.githubusercontent.com/u/32818?v=4)](https://github.com/tomshaw "tomshaw (279 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)") --- Tags laravellivewire ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/tomshaw-mediable/health.svg) ``` [![Health](https://phpackages.com/badges/tomshaw-mediable/health.svg)](https://phpackages.com/packages/tomshaw-mediable) ``` ### Alternatives [laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k12.1M99](/packages/laravel-pulse)[livewire/flux The official UI component library for Livewire. 9385.0M86](/packages/livewire-flux)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[spatie/livewire-filepond Upload files using Filepond in Livewire components 306452.7k3](/packages/spatie-livewire-filepond)[spatie/laravel-google-cloud-storage Google Cloud Storage filesystem driver for Laravel 2408.9M13](/packages/spatie-laravel-google-cloud-storage)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)