Skip to content

Commit c344b95

Browse files
committed
feat: add MediaGallery form field component
- Add comprehensive MediaGallery component for Filament forms - Include bulk operations with toggleable bulk delete - Support drag & drop file uploads and URL uploads - Memory-efficient image processing to handle multiple uploads - Responsive grid layout with cover image functionality - Complete test coverage and documentation
1 parent c6126c4 commit c344b95

File tree

5 files changed

+2035
-0
lines changed

5 files changed

+2035
-0
lines changed

docs/MediaGallery.md

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# MediaGallery Form Field
2+
3+
A powerful image gallery form field for Filament with drag & drop reordering, multiple upload options, and preview features.
4+
5+
## Basic Usage
6+
7+
```php
8+
use Eclipse\Common\Filament\Forms\Components\MediaGallery;
9+
10+
MediaGallery::make('images')
11+
->collection('gallery')
12+
->required()
13+
```
14+
15+
## Collection Configuration
16+
17+
```php
18+
MediaGallery::make('images')
19+
->collection('product-gallery') // Media collection name
20+
->collection(fn () => 'dynamic-' . $this->category) // Dynamic collection
21+
```
22+
23+
## Upload Options
24+
25+
```php
26+
MediaGallery::make('images')
27+
->maxFiles(10) // Maximum number of files
28+
->maxFileSize(2048) // Max size in KB
29+
->acceptedFileTypes(['image/jpeg', 'image/png', 'image/webp'])
30+
->allowUploads() // Enable both upload methods
31+
->single() // Single file mode
32+
->multiple() // Multiple files (default)
33+
```
34+
35+
## Preview & Layout
36+
37+
```php
38+
MediaGallery::make('images')
39+
->columns(6) // Number of columns (default: 4)
40+
->thumbnailHeight(200) // Thumbnail height in pixels (default: 150)
41+
->preview() // Enable lightbox preview (disabled by default)
42+
->orderable() // Enable drag & drop reordering (disabled by default)
43+
```
44+
45+
### Responsive Columns
46+
47+
```php
48+
MediaGallery::make('images')
49+
->columns([
50+
'default' => 2,
51+
'sm' => 3,
52+
'lg' => 4,
53+
'xl' => 6
54+
])
55+
```
56+
57+
## Methods Available
58+
59+
### Layout Control
60+
- `columns(int|array)` - Set number of grid columns or responsive column configuration (default: 4)
61+
- `thumbnailHeight(int)` - Set thumbnail image height in pixels (default: 150)
62+
63+
### Interactive Features
64+
- `preview()` - Enable lightbox modal for image preview (disabled by default)
65+
- `orderable()` - Enable drag & drop reordering (disabled by default)
66+
67+
### Upload Configuration
68+
- `collection(string)` - Set media collection name
69+
- `maxFiles(int)` - Maximum number of uploadable files
70+
- `maxFileSize(int)` - Maximum file size in KB
71+
- `acceptedFileTypes(array)` - Allowed file MIME types
72+
- `allowFileUploads()` - Enable file upload button (disabled by default)
73+
- `allowUrlUploads()` - Enable URL upload button (disabled by default)
74+
- `allowUploads()` - Enable both file and URL upload buttons
75+
- `single()` - Single file mode
76+
- `multiple()` - Multiple file mode (default)
77+
78+
## Actions Available
79+
80+
The MediaGallery provides these built-in actions:
81+
82+
- **Upload**: File upload with drag & drop interface
83+
- **URL Upload**: Add images from external URLs
84+
- **Edit**: Edit image details and metadata
85+
- **Delete**: Remove images with confirmation
86+
- **Set Cover**: Mark image as cover/featured
87+
- **Reorder**: Drag & drop reordering (when `orderable()` is enabled)
88+
89+
## Examples
90+
91+
### Basic Gallery (View Only)
92+
```php
93+
MediaGallery::make('images')
94+
->collection('products')
95+
```
96+
97+
### Gallery with Uploads
98+
```php
99+
MediaGallery::make('images')
100+
->collection('gallery')
101+
->allowUploads() // Enable both upload methods
102+
->maxFiles(20)
103+
```
104+
105+
### Gallery with Preview
106+
```php
107+
MediaGallery::make('images')
108+
->collection('gallery')
109+
->allowUploads()
110+
->preview() // Enables lightbox
111+
->columns(3)
112+
->thumbnailHeight(180)
113+
```
114+
115+
### Orderable Gallery
116+
```php
117+
MediaGallery::make('images')
118+
->collection('portfolio')
119+
->allowUploads()
120+
->orderable() // Enables drag & drop
121+
->columns(5)
122+
->maxFiles(50)
123+
```
124+
125+
### File Upload Only
126+
```php
127+
MediaGallery::make('images')
128+
->collection('secure-documents')
129+
->allowFileUploads() // Only file uploads
130+
->maxFiles(10)
131+
```
132+
133+
### URL Upload Only
134+
```php
135+
MediaGallery::make('images')
136+
->collection('external-media')
137+
->allowUrlUploads() // Only URL uploads
138+
->columns(6)
139+
```
140+
141+
### Complete Configuration
142+
```php
143+
MediaGallery::make('images')
144+
->collection('products')
145+
->allowUploads() // Enable both upload methods
146+
->maxFiles(20)
147+
->columns(4)
148+
->thumbnailHeight(180)
149+
->preview() // Enable lightbox
150+
->orderable() // Enable reordering
151+
->acceptedFileTypes(['image/jpeg', 'image/png'])
152+
```
153+
154+
### Dynamic Configuration
155+
```php
156+
MediaGallery::make('images')
157+
->collection(fn () => $this->record?->category . '-images')
158+
->maxFiles(fn () => $this->record?->isPremium() ? 50 : 10)
159+
->columns(fn () => $this->getColumnCount())
160+
```
161+
162+
## Default Behaviors
163+
164+
- **Upload Buttons**: Disabled by default (use `->allowUploads()`, `->allowFileUploads()`, or `->allowUrlUploads()`)
165+
- **Lightbox**: Disabled by default (use `->preview()` to enable)
166+
- **Drag & Drop**: Disabled by default (use `->orderable()` to enable)
167+
- **Grid Columns**: 4 columns by default
168+
- **File Types**: Images only (jpeg, png, gif, webp)
169+
170+
## Requirements
171+
172+
- Spatie Media Library package
173+
- Model must implement `HasMedia` interface
174+
- Images are stored in configured media collections

0 commit comments

Comments
 (0)