DEV Community

Amjad Iqbal
Amjad Iqbal

Posted on

URL Image Uploader for Filament — Upload from Anywhere in Seconds

#filament #laravel #php #webdev

1. Introduction

URL Image Uploader is a FilamentPHP plugin that allows you to upload images directly from a URL — no manual download or drag-and-drop needed.
It integrates seamlessly into Filament forms, providing a quick and developer-friendly way to fetch remote images and store them in your configured filesystem (local, S3, etc.).

Package link: https://filamentphp.com/plugins/amjadiqbal-url-image-uploader

Github link: https://github.com/amjadiqbal/filament-url-image-uploader

2. Key Features

  • 🔗 Upload any image by just pasting a URL
  • ⚡ Works with all Filament form fields
  • 🪶 Supports local and cloud storage (like S3, DigitalOcean Spaces, etc.)
  • 🧩 Customizable validation rules and UI labels
  • 🧠 Built for Filament v3+ and Laravel 10+

3. Installation

Run the following command in your Laravel project:

composer require amjadiqbal/url-image-uploader
Enter fullscreen mode Exit fullscreen mode

Once installed, publish the config file if you want to customize defaults:

php artisan vendor:publish --tag="url-image-uploader-config"
Enter fullscreen mode Exit fullscreen mode

You’ll get a new config file at:

config/url-image-uploader.php
Enter fullscreen mode Exit fullscreen mode

4. Basic Usage

You can use the field directly inside any Filament form:

use Amjadiqbal\UrlImageUploader\Forms\Components\UrlImageUploader;

UrlImageUploader::make('image')
    ->label('Upload from URL')
    ->directory('uploads')
    ->disk('public')
    ->rules(['required', 'image', 'max:2048']);
Enter fullscreen mode Exit fullscreen mode

When the user pastes an image URL, the plugin automatically:

  1. Downloads it to your configured disk.
  2. Stores it under the specified directory.
  3. Returns the file path relative to your disk.

5. Advanced Configuration

You can customize the behavior globally in your config file.

Example config/url-image-uploader.php:

return [
    'disk' => 'public',
    'directory' => 'uploads/images',
    'filename' => 'random', // options: 'original' or 'random'
    'max_size' => 2048, // in KB
];
Enter fullscreen mode Exit fullscreen mode

You can also override options per field:

UrlImageUploader::make('avatar')
    ->disk('s3')
    ->directory('avatars')
    ->filename('original');
Enter fullscreen mode Exit fullscreen mode

6. Validation and Error Handling

Laravel’s built-in validation integrates seamlessly.
You can use standard image rules like:

->rules(['image', 'mimes:jpeg,png,jpg,gif', 'max:4096'])
Enter fullscreen mode Exit fullscreen mode

If the URL is invalid or not an image, the field automatically throws a Filament form validation error with a friendly message.

7. Integration Example

A real-world example in a User Resource:

// app/Filament/Resources/UserResource.php

use Amjadiqbal\UrlImageUploader\Forms\Components\UrlImageUploader;

public static function form(Form $form): Form
{
    return $form->schema([
        TextInput::make('name')->required(),
        TextInput::make('email')->email()->required(),
        UrlImageUploader::make('profile_photo')
            ->label('Profile Picture URL')
            ->directory('users/profile_photos')
            ->disk('s3'),
    ]);
}
Enter fullscreen mode Exit fullscreen mode

This allows your admin users to paste a direct image link and have it automatically uploaded to S3.

8. Testing Locally

To test uploads locally:

  1. Ensure your FILESYSTEM_DISK=public in .env.
  2. Make sure php artisan storage:link is set up.
  3. Paste a sample URL (like https://picsum.photos/200/300) in your form.
  4. The image will appear instantly in your uploads directory.

9. Deploying to Production

If using S3 or another cloud service:

  • Set up your disk credentials in .env: 
  FILESYSTEM_DISK=s3
  AWS_ACCESS_KEY_ID=your-key
  AWS_SECRET_ACCESS_KEY=your-secret
  AWS_DEFAULT_REGION=us-east-1
  AWS_BUCKET=your-bucket-name
Enter fullscreen mode Exit fullscreen mode
  • Update your config/filesystems.php accordingly.
  • Clear and cache your config: 
  php artisan config:cache
Enter fullscreen mode Exit fullscreen mode

That’s it — your app can now fetch and store remote images securely in production.

10. Conclusion

This plugin simplifies one of the most common admin tasks: importing images from the web without manual uploads.
Whether you’re building an image gallery, blog CMS, or eCommerce admin, the URL Image Uploader saves both time and effort.

If you find it useful, consider leaving a ⭐ on GitHub or supporting the author.

Top comments (0)