Add filepond captureMethod for FileUpload via Camera

[crgAdrian]

Feature Description

I propose the addition of a new option captureMethod to the FileUpload component within FilePond. This feature would allow developers to specify how the file input should capture the data, particularly useful for mobile devices where the user can choose to take a picture or video directly or select existing files. The primary aim is to enhance user experience and provide flexibility for developers to tailor file input behavior according to the application's needs.

Forms\Components\FileUpload::make('image')->image()->captureMethod(['camera'])->required(),

[eduanmoldeep]

I wonder, why isn't this developed yet,
I have started filament and laravel since a couple months and first time observed a valuable feature being missing

[dlespinosa365]

HI @crgAdrian Is this customization available or in some plugin?

[emmanpbarrameda]

i think, plugin is good for this

[emmanpbarrameda]

up for this feature

[exabyssus]

Anyone looking at this issue, you can just call ->extraInputAttributes(['capture' => 'environment']); on a field, that will achieve desired effect.

[dlespinosa365]

Yes that is usefull in mobile device, but not in desktop

[exabyssus]

You are right, but to achieve "capture" on the desktop, a different file upload mechanism must be used since neither Filepond nor most browsers support such a feature. I think the original question is about adding a native capture to the FileUpload component.

[dlespinosa365]

Agree with you, they ask for mobiles, but it will be great, I used
->extraInputAttributes([ 'capture' => 'user', ]) and works fine, but for desktop I implemented a new custom field to load the web camera and take a picture

[emmanpbarrameda]

can you share some source code @dlespinosa365 that you implemented, to make it work on desktop?

[dlespinosa365]

Sure:
Component TakePicture

class TakePicture extends Field
{
    protected string $view = 'forms.components.take-picture';

    protected function setUp(): void
    {
        parent::setUp();
    }

}

Component TakePicture Template

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{
            photoData: null,
            photoSelected: false,
            webcamError: null,
            initWebcam() {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(stream => {
                        this.$refs.video.srcObject = stream;
                    })
                    .catch(error => {
                        console.error('Error accessing webcam:', error);
                        switch (error.name) {
                            case 'NotAllowedError':
                            case 'PermissionDeniedError': // Firefox uses this in older versions
                                this.webcamError = '{{ __('Permission denied. Please allow camera access') }}';
                                break;
                            case 'NotFoundError':
                            case 'DevicesNotFoundError':
                                this.webcamError = '{{ __('No available or connected camera found') }}';
                                break;
                            case 'NotReadableError':
                            case 'TrackStartError': // Old Chrome
                                this.webcamError = '{{ __('The camera is in use by another application or cannot be accessed') }}';
                                break;
                            case 'OverconstrainedError':
                                this.webcamError = '{{ __('Could not meet the requested camera constraints') }}';
                                break;
                            case 'SecurityError':
                                this.webcamError = '{{ __('Access blocked for security reasons. Use HTTPS or a trusted browser') }}';
                                break;
                            case 'AbortError':
                                this.webcamError = '{{ __('The camera access operation was canceled') }}';
                                break;
                            default:
                                this.webcamError = '{{ __('An unknown error occurred while trying to open the camera') }}';
                        }
                    });
            },
            capturePhoto() {
                const video = this.$refs.video;
                const canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                const context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                this.photoData = canvas.toDataURL('image/png');
                this.photoSelected = false; // Reset selection when capturing new photo
            },
            usePhoto() {
                $wire.set('{{ $getStatePath() }}', this.photoData);
                this.photoSelected = true;
            }
        }"
        x-init="initWebcam"
        class="flex flex-col space-y-2"
    >
        <!-- Error message if occurs when accessing the camera -->
        <template x-if="webcamError">
            <div class="text-red-600 text-sm">
                <strong>Error:</strong> <span x-text="webcamError"></span>
            </div>
        </template>

        <div class="flex items-center space-x-4">
            <!-- Camera container (only if there's no error) -->
            <template x-if="!webcamError">
                <div @click="capturePhoto" class="w-32 h-32 rounded-full overflow-hidden bg-gray-200 cursor-pointer border border-gray-400 flex items-center justify-center">
                    <video x-ref="video" autoplay class="w-full h-full object-cover"></video>
                </div>
            </template>

            <!-- Preview of the captured photo with "Use this" link -->
            <template x-if="photoData">
                <div class="relative w-32 h-32">
                    <!-- Captured image -->
                    <div
                        :class="photoSelected
                            ? 'w-32 h-32 rounded-full overflow-hidden border-2 border-green-900'
                            : 'w-32 h-32 rounded-full overflow-hidden border border-gray-400'"
                    >
                        <img :src="photoData" class="w-full h-full object-cover">
                        <input {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}" class="hidden">
                    </div>
                    <!-- "Use this" link inside the circle -->
                    <div class="absolute inset-0 flex items-end justify-center pb-4">
                        <a href="#" @click.prevent="usePhoto" class="filepond--label-action">{{ __('Use') }}</a>
                    </div>
                </div>
            </template>
        </div>

        <!-- Hidden field to store the captured photo -->
        <input type="hidden" x-model="photoData" name="{{ $getStatePath() }}">
    </div>
</x-dynamic-component>

Use in a CustomerResource

ToggleButtons::make('image_mode')
                        ->translateLabel()
                        ->label('Change image')
                        ->options([
                            'UPLOAD' => __('Upload a image'),
                            'TAKE' => __('Take a picture'),
                        ])
                        ->default('UPLOAD')
                        ->afterStateHydrated(function (ToggleButtons $component) {
                            $component->state('UPLOAD');
                        })
                        ->live()
                        ->columnSpanFull()
                        ->grouped(),
                    FileUpload::make('photo')
                        ->disk('user_photo')
                        ->translateLabel()
                        ->avatar()
                        ->label('Photo')
                        ->image()
                        ->imageEditor()
                        ->imageEditorAspectRatios(['1:1'])
                        ->reorderable()
                        ->visible(function (Get $get) {
                            return $get('image_mode') === 'UPLOAD';
                        })
                        ->columnSpanFull(),
                    TakePicture::make('take_photo')
                        ->translateLabel()
                        ->label('Take a picture')
                        ->visible(function (Get $get) {
                            return $get('image_mode') === 'TAKE';
                        })
                        ->columnSpanFull()
              

With this approach, I have some problems, first in the mutateBeforeCreate and mutateBeforeSave, I need to handle the base64 string into a file and set it into $data['photo'] key if the image_mode === 'TAKE' and then remove both key because is only to handle in the form, I can not doit that logic into the field.

Maybe you can improve this solution

[emmanpbarrameda]

TakePicture Component for Filament Forms

A custom Filament 3 form component that allows users to take photos directly from their device camera and upload them to your application's storage.

Features

• Take photos directly from the user's device camera
• Works in Filament 3 forms
• Configurable storage options (disk, directory, visibility)
• Camera selector option for devices with multiple cameras
• Adjustable aspect ratio
• Configurable image quality
• Modal support for a better user experience

Installation

1. Download the required files:

   • TakePicture.php
   • take-picture.blade.php

2. Place the files in the following directories:

   • TakePicture.php → app/Filament/Forms/Components/TakePicture.php
   • take-picture.blade.php → resources/views/forms/components/take-picture.blade.php

Usage

Add the component to your Filament form:

use App\Filament\Forms\Components\TakePicture;

// ...

TakePicture::make('camera_test')
    ->label('Camera Test')
    ->disk('public')
    ->directory('uploads/services/payment_receipts_proof')
    ->visibility('public')
    ->useModal(true)
    ->showCameraSelector(true)
    ->aspect('16:9')
    ->imageQuality(80)
    ->shouldDeleteOnEdit(false)

Configuration Options

Method	Description
disk(string $disk)	Set the storage disk for saving photos (e.g., 'public', 's3')
directory(string $directory)	Set the directory path within the disk where photos will be stored
visibility(string $visibility)	Set the file visibility (e.g., 'public', 'private')
useModal(bool $useModal)	Enable or disable modal view for the camera
showCameraSelector(bool $showSelector)	Enable or disable camera selection option for devices with multiple cameras
aspect(string $aspect)	Set the aspect ratio for the captured image (e.g., '16:9', '4:3', '1:1')
imageQuality(int $quality)	Set the JPEG quality of the captured image (0-100)
shouldDeleteOnEdit(bool $shouldDelete)	Whether to delete the previous file when editing

Requirements

• Laravel 10+
• Filament 3+
• A device with camera access

How it Works

1. The component renders a camera interface using the device's webcam/camera
2. Users can capture photos directly within your Filament form
3. Images are automatically uploaded to your configured storage location
4. The component stores the relative file path in your form model

Screenshots

as of 041525

[dlespinosa365]

Nice work @emmanpbarrameda. Maybe this component must be included on the F3. What do you think @danharrin?

[danharrin]

This would be a great plugin that someone can build and release, but I am not planning to add it into the core of Filament at the moment.

[eduanmoldeep]

given the amount of effort added by @emmanpbarrameda it will be best for them to bundle up as a plugin!
https://filamentphp.com/docs/3.x/panels/plugins

Also, if possible @danharrin if possible, you could share with them the playlist tutorial on filament plugin bundling?

will be win - win for both! ☮️