Media field input

Author: Baspa

README.md

@@ -11,7 +11,17 @@ Hi! We are a web development agency from Nijmegen in the Netherlands and we use
 
 ## About this package
 
-This is where your description should go. Limit it to a paragraph or two. Consider adding a small example.
+This package adds a powerful Media field component to the Backstage CMS. It allows you to:
+
+-   Upload and manage media files (images, videos, audio, PDFs) directly in your forms
+-   Configure accepted file types per field
+-   Enable single or multiple file uploads
+-   Easily integrate with Laravel's file storage system
+-   Preview uploaded media files
+-   Organize media assets with a built-in media library
+-   Handle file validation and processing automatically
+
+The Media field is built on top of Filament's form components and integrates seamlessly with the Backstage CMS interface.
 
 ## Installation
 
@@ -21,38 +31,19 @@ You can install the package via composer:
 composer require vormkracht10/backstage-media-field
 ```
 
-You can publish and run the migrations with:
-
-```bash
-php artisan vendor:publish --tag="backstage-media-field-migrations"
-php artisan migrate
-```
-
-You can publish the config file with:
-
-```bash
-php artisan vendor:publish --tag="backstage-media-field-config"
-```
-
-Optionally, you can publish the views using
-
-```bash
-php artisan vendor:publish --tag="backstage-media-field-views"
-```
-
-This is the contents of the published config file:
+Then you need to add the Uploadcare field to your `backstage.php` config file:
 
 ```php
 return [
+    'fields' => [
+        Vormkracht10\MediaField\Media::class,
+    ],
 ];
 ```
 
 ## Usage
 
-```php
-$media = new Vormkracht10\Media();
-echo $media->echoPhrase('Hello, Vormkracht10!');
-```
+After adding the Media field to your `backstage.php` config file, the field will automatically be available in the Backstage CMS.
 
 ## Testing
 

src/Facades/MediaField.php

@@ -5,12 +5,12 @@
 use Illuminate\Support\Facades\Facade;
 
 /**
- * @see \Vormkracht10\MediaField\MediaField
+ * @see \Vormkracht10\MediaField\Media
  */
-class MediaField extends Facade
+class Media extends Facade
 {
     protected static function getFacadeAccessor(): string
     {
-        return \Vormkracht10\MediaField\MediaField::class;
+        return \Vormkracht10\MediaField\Media::class;
     }
-}
+}

src/MediaField.php

@@ -2,4 +2,105 @@
 
 namespace Vormkracht10\MediaField;
 
-class MediaField {}
+use Filament\Forms;
+use Vormkracht10\Fields\Fields\Base;
+use Vormkracht10\Fields\Models\Field;
+use Illuminate\Database\Eloquent\Model;
+use Vormkracht10\Backstage\Models\Media as MediaModel;
+use Vormkracht10\MediaPicker\MediaPicker;
+use Vormkracht10\Fields\Contracts\FieldContract;
+use Vormkracht10\MediaPicker\Components\MediaPicker as Input;
+
+class Media extends Base implements FieldContract
+{
+    public static function getDefaultConfig(): array
+    {
+        return [
+            ...parent::getDefaultConfig(),
+            'acceptedFileTypes' => ['image/*', 'video/*', 'audio/*', 'application/pdf'],
+            'multiple' => false,
+        ];
+    }
+
+    public static function make(string $name, Field $field): Input
+    {
+        $input = self::applyDefaultSettings(Input::make($name), $field);
+
+        if (! empty($field->config['acceptedFileTypes']) && ! is_array($field->config['acceptedFileTypes'])) {
+            $field->config['acceptedFileTypes'] = [$field->config['acceptedFileTypes']];
+        }
+
+        $input = $input->label($field->name ?? self::getDefaultConfig()['label'] ?? null)
+            ->acceptedFileTypes($field->config['acceptedFileTypes'] ?? self::getDefaultConfig()['acceptedFileTypes'])
+            ->multiple($field->config['multiple'] ?? self::getDefaultConfig()['multiple']);
+
+        return $input;
+    }
+
+    public function getForm(): array
+    {
+        return [
+            Forms\Components\Tabs::make()
+                ->schema([
+                    Forms\Components\Tabs\Tab::make('General')
+                        ->label(__('General'))
+                        ->schema([
+                            ...parent::getForm(),
+                        ]),
+                    Forms\Components\Tabs\Tab::make('Field specific')
+                        ->label(__('Field specific'))
+                        ->schema([
+                            Forms\Components\Grid::make(2)->schema([
+                                Forms\Components\Select::make('config.acceptedFileTypes')
+                                    ->label(__('Accepted file types'))
+                                    ->options([
+                                        'image/*' => 'Images',
+                                        'video/*' => 'Videos',
+                                        'audio/*' => 'Audio',
+                                        'application/pdf' => 'PDF',
+                                    ])
+                                    ->multiple(),
+                                Forms\Components\Toggle::make('config.multiple')
+                                    ->label(__('Multiple')),
+                            ]),
+                        ]),
+                ])->columnSpanFull(),
+        ];
+    }
+
+    public static function mutateFormDataCallback(Model $record, Field $field, array $data): array
+    {
+        if (! isset($record->values[$field->slug])) {
+            return $data;
+        }
+
+        $media = MediaModel::whereIn('ulid', $record->values[$field->slug])
+            ->get()
+            ->map(function ($media) {
+                return 'media/' . $media->filename;
+            })->toArray();
+
+        $data['value'][$field->slug] = $media;
+
+        return $data;
+    }
+
+    public static function mutateBeforeSaveCallback(Model $record, Field $field, array $data): array
+    {
+        if ($field->field_type !== 'media') {
+            return $data;
+        }
+
+        if (! isset($data['value'][$field->slug])) {
+            return $data;
+        }
+
+        $media = MediaPicker::create($data['value'][$field->slug]);
+
+        $data['value'][$field->slug] = collect($media)->map(function ($media) {
+            return $media->ulid;
+        })->toArray();
+
+        return $data;
+    }
+}