Skip to content

Commit a709f80

Browse files
codebyraycodebyray
committed
Added themes for the uploader, tailwindcs and boostrap.
Customer themes can now be created.
1 parent 69232ca commit a709f80

File tree

6 files changed

+1216
-573
lines changed

6 files changed

+1216
-573
lines changed

‎CHANGELOG.md‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
99
---
1010

1111
## [Unreleased]
12+
1213
### Added
13-
- Docs: environment variable examples for presets (`MEDIA_TYPES_*`, `MEDIA_MIMES_*`, `MEDIA_MAXKB_*`).
14-
- Tests: deterministic duplicate-detection test helper (`TestableMediaUploader`) and event-based assertions.
15-
- Troubleshooting guidance for Testbench/SQLite and Livewire temp upload disk.
14+
- Configuration documentation for each option in `config/media-uploader.php`, including environment variable overrides, presets (types, mimes, max_kb), and collection → preset mapping.
15+
- Guidance for creating and registering custom themes:
16+
- Create a new folder under `themes`, e.g. `custom`.
17+
- Copy the existing `media-uploader` theme file from `tailwind` or `bootstrap` into the new `custom` folder (do not change the file name).
18+
- Edit the copied file as desired.
19+
- Register it in the `themes` config array, for example: `'custom' => 'media-uploader::themes.custom.media-uploader'`.
20+
- Use it globally via `.env` (`MEDIA_UPLOADER_THEME=custom`) or per instance:
21+
<livewire:media-uploader
22+
:for="$post"
23+
collection="images"
24+
theme="custom"
25+
/>
1626

1727
### Changed
18-
- Test suite favors Pest; PHPUnit example retained only if desired by consumers.
19-
- Assertions updated to reflect Spatie filename sanitization (spaces → dashes on rename).
28+
- Clarified the behavior of `accept_from_config` and how the `accept` attribute is derived from the active preset.
2029

2130
### Fixed
22-
- Intermittent test failures: ensured `media` table migration loads under Testbench and configured fake disks (`public`, `local`, `tmp-for-tests`).
31+
2332

2433
---
2534

‎config/media-uploader.php‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,153 @@
22

33
return [
44

5+
/*
6+
|--------------------------------------------------------------------------
7+
| Active UI Theme
8+
|--------------------------------------------------------------------------
9+
| Controls which Blade view is used to render the uploader UI.
10+
| Accepts a key from the "themes" map below.
11+
|
12+
| Set globally via .env:
13+
| MEDIA_UPLOADER_THEME=tailwind
14+
|
15+
| You can override per-instance in your Livewire component usage:
16+
| <livewire:media-uploader
17+
| :for="$post"
18+
| collection="images"
19+
| theme="custom"
20+
| />
21+
|
22+
| Default: 'tailwind'
23+
*/
24+
'theme' => env('MEDIA_UPLOADER_THEME', 'tailwind'),
25+
26+
/*
27+
|--------------------------------------------------------------------------
28+
| Theme View Map
29+
|--------------------------------------------------------------------------
30+
| A list of available uploader themes. Keys are theme identifiers, values
31+
| are the fully qualified Blade view names to render the component.
32+
|
33+
| Custom themes:
34+
| - Create a new folder under the resources/views/vendor/media-uploader/themes directory, e.g. "custom".
35+
| - Copy one of the supplied theme files (media-uploader.blade.php) from "tailwind" or "bootstrap"
36+
| into the new "custom" folder. Keep the file name unchanged
37+
| (e.g. media-uploader.blade.php).
38+
| - Edit the copied file as needed.
39+
| - Register it here using the folder name as the key and the view path as the value:
40+
| 'custom' => 'media-uploader::themes.custom.media-uploader',
41+
| - Make sure to clear your view and config cache after implementing the new theme
42+
|
43+
| Usage:
44+
| - Globally via .env (see MEDIA_UPLOADER_THEME above), or
45+
| - Per instance:
46+
| <livewire:media-uploader
47+
| :for="$post"
48+
| collection="images"
49+
| theme="custom"
50+
| />
51+
*/
52+
'themes' => [
53+
'tailwind' => 'media-uploader::themes.tailwind.media-uploader',
54+
'bootstrap' => 'media-uploader::themes.bootstrap.media-uploader',
55+
// 'custom' => 'media-uploader::themes.custom.media-uploader',
56+
],
57+
58+
/*
59+
|--------------------------------------------------------------------------
60+
| Accept Attribute Source
61+
|--------------------------------------------------------------------------
62+
| When true, the uploader's HTML "accept" attribute is computed from the
63+
| selected preset's "types" or "mimes" defined below. When false, the
64+
| component won't auto-generate the "accept" attribute from config.
65+
*/
566
'accept_from_config' => true,
667

68+
/*
69+
|--------------------------------------------------------------------------
70+
| Collection → Preset Mapping
71+
|--------------------------------------------------------------------------
72+
| Define logical collections (used by your forms/models) and map each one
73+
| to a preset name from the "presets" section below.
74+
| Example: uploading to the "avatars" collection will apply the "images"
75+
| preset's validation constraints.
76+
*/
777
'collections' => [
878
'avatars' => 'images',
979
'images' => 'images',
1080
'attachments' => 'docs',
1181
],
1282

83+
/*
84+
|--------------------------------------------------------------------------
85+
| Presets
86+
|--------------------------------------------------------------------------
87+
| Each preset defines:
88+
| - types: Comma-separated file extensions (used for UI accept lists).
89+
| - mimes: Comma-separated MIME types (useful for strict validation).
90+
| - max_kb: Maximum file size in kilobytes.
91+
|
92+
| All values can be overridden via env variables for environment-specific
93+
| behavior. If an env var is missing, the default value is used.
94+
*/
1395
'presets' => [
96+
/*
97+
|----------------------------------------------------------------------
98+
| Images Preset
99+
|----------------------------------------------------------------------
100+
| Env:
101+
| - MEDIA_TYPES_IMAGES (e.g. "jpg,jpeg,png,webp,avif,gif")
102+
| - MEDIA_MIMES_IMAGES (e.g. "image/jpeg,image/png,...")
103+
| - MEDIA_MAXKB_IMAGES (integer KB, e.g. 10240 for 10 MB)
104+
*/
14105
'images' => [
15106
'types' => env('MEDIA_TYPES_IMAGES', 'jpg,jpeg,png,webp,avif,gif'),
16107
'mimes' => env('MEDIA_MIMES_IMAGES', 'image/jpeg,image/png,image/webp,image/avif,image/gif'),
17108
'max_kb' => (int) env('MEDIA_MAXKB_IMAGES', 10240),
18109
],
19110

111+
// ... existing code ...
112+
/*
113+
|----------------------------------------------------------------------
114+
| Documents Preset
115+
|----------------------------------------------------------------------
116+
| Env:
117+
| - MEDIA_TYPES_DOCS (e.g. "pdf,doc,docx,xls,xlsx,ppt,pptx,txt")
118+
| - MEDIA_MIMES_DOCS (e.g. "application/pdf,application/msword,...")
119+
| - MEDIA_MAXKB_DOCS (integer KB, e.g. 20480 for 20 MB)
120+
*/
20121
'docs' => [
21122
'types' => env('MEDIA_TYPES_DOCS', 'pdf,doc,docx,xls,xlsx,ppt,pptx,txt'),
22123
'mimes' => env('MEDIA_MIMES_DOCS', 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain'),
23124
'max_kb' => (int) env('MEDIA_MAXKB_DOCS', 20480),
24125
],
25126

127+
/*
128+
|----------------------------------------------------------------------
129+
| Videos Preset
130+
|----------------------------------------------------------------------
131+
| Env:
132+
| - MEDIA_TYPES_VIDEOS (e.g. "mp4,mov,webm")
133+
| - MEDIA_MIMES_VIDEOS (e.g. "video/mp4,video/quicktime,video/webm")
134+
| - MEDIA_MAXKB_VIDEOS (integer KB, e.g. 102400 for 100 MB)
135+
*/
26136
'videos' => [
27137
'types' => env('MEDIA_TYPES_VIDEOS', 'mp4,mov,webm'),
28138
'mimes' => env('MEDIA_MIMES_VIDEOS', 'video/mp4,video/quicktime,video/webm'),
29139
'max_kb' => (int) env('MEDIA_MAXKB_VIDEOS', 102400),
30140
],
31141

142+
/*
143+
|----------------------------------------------------------------------
144+
| Default Preset
145+
|----------------------------------------------------------------------
146+
| A catch-all preset combining common image and document formats.
147+
| Env:
148+
| - MEDIA_TYPES_DEFAULT
149+
| - MEDIA_MIMES_DEFAULT
150+
| - MEDIA_MAXKB_DEFAULT
151+
*/
32152
'default' => [
33153
'types' => env('MEDIA_TYPES_DEFAULT', 'jpg,jpeg,png,webp,avif,gif,pdf,doc,docx,xls,xlsx,ppt,pptx,txt'),
34154
'mimes' => env('MEDIA_MIMES_DEFAULT', 'image/jpeg,image/png,image/webp,image/avif,image/gif,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain'),

0 commit comments

Comments
 (0)