README

A Filament plugin that enables multi-source file uploads, allowing users to upload files either from their device or via a URL.
Supports conditional required fields and only-image upload restrictions.

Features

Upload files from your device or provide a direct URL.
Tabs UI for toggling between upload sources.
Conditional required validation for both file and URL fields.
Optionally restrict uploads to images only.
Monitors file upload to hide/show tabs dynamically.
Configurable labels, icons, and polling intervals.

Installation

composer require przwl/multi-source-file-upload

If you are using Laravel < 10 or not using package discovery, add the service provider:

// config/app.php

'providers' => [
    ...
    Przwl\MultiSourceFileUpload\MultiSourceFileUploadServiceProvider::class,
],

Configuration

Optionally publish the config:

php artisan vendor:publish --tag="multi-source-file-upload-config"

You can customize:

Poll interval (poll_interval)
Labels (labels.file_upload, labels.url_upload)
Icons (icons.file_upload, icons.url_upload)

// config/multi-source-file-upload.php

return [
    'poll_interval' => 50, // ms
    'labels' => [
        'file_upload' => 'File Upload',
        'url_upload' => 'URL Upload',
    ],
    'icons' => [
        'file_upload' => 'heroicon-o-arrow-up-tray',
        'url_upload' => 'heroicon-o-globe-alt',
    ]
];

Usage

In your Filament form, use the MultiSourceFileUpload component by spreading its schema into your form.

Complete Example

use Filament\Forms\Form;
use Przwl\MultiSourceFileUpload\Components\MultiSourceFileUpload;

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('title')
                ->required(),
            
            // Use the multi-source file upload component
                ...(MultiSourceFileUpload::make('image', 'image_url')
                    ->required()
                    ->image())
                    ->getSchema(),

                
            // Other form fields...
        ]);
}

Both "file" and "url" tabs are coordinated: uploading a file clears the URL; supplying a URL clears the file field.

Important: Make sure to set the database fields (e.g., image and image_url) to ->nullable() in your migration file, since only one field will be filled at a time.

// Example migration
Schema::create('your_table', function (Blueprint $table) {
    $table->id();
    $table->string('image')->nullable();
    $table->string('image_url')->nullable();
    // ...
});

How It Works

The plugin uses a Tabs interface for "File" and "URL" upload.
When a file is uploaded, the URL field is disabled, and vice versa.
Only one source can be filled at a time.
Uses Alpine.js for hiding the tab when a file upload is detected.
Poll interval for DOM updates is configurable in the config.

Advanced

You can customize required logic or column span (see the implementation for details):

  ...(MultiSourceFileUpload::make('image', 'image_url')
    ->required()
    ->image())
    ->getSchema(),

License

MIT

przwl / multi-source-file-upload

Maintainers

Details