upload captured image into fileupload from webcam

[kenmdavids]

Package

Form builder

Package Version

v3.2

How can we help you?

I'm integrating webcam js into filament. I want to use one field (capture1) to capture the image from the user's camera and fill the photo field, the photo field can be used to browse photos manually in case someone doesn't want to use the web camera. In my RegistrationResource I have tried two methods,

1. Creating a Component for a custom field

ImageCapture::make('capture1') ->reactive(),
                Forms\Components\FileUpload::make('photo')
                    ->directory('uploads/webcam')
                    ->label('Captured Photo')
                    ->image() // Enables image preview
                    ->visibility('visible')
                    ->disk('public')
                ,

2. Using ViewField

Forms\Components\ViewField::make('webcam')
                    ->view('filament.registration-webcam'),
                Forms\Components\FileUpload::make('photo')
                    ->disk('public')
                    ->directory('uploads/webcam')
                    ->image()
                    ->required()
                    ->reactive(),

In both blades whether from the component or the view field, I have implemented the following code

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
><div x-data="{
        snapshot() {
            Webcam.snap(data_uri => {
                console.log('Captured Image Data URI:', data_uri);

                $wire.dispatch('imageCaptured', [data_uri]);

            });
        }
    }"
         x-init="
        Webcam.set({
            width: 350,
            height: 287,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach($refs.camera);
    ">
        <div x-ref="camera"></div>
        <button type="button" @click="snapshot()">Capture Photo</button>
    </div>
</x-dynamic-component>

this code works, it captures the image.
But whether I use the manageRegistration or CreateRegistration like below I can't get the photo field filled later on and even listen to the event from either method:

<?php
namespace App\Filament\Resources\RegistrationResource\Pages;

use App\Filament\Resources\RegistrationResource;
use Filament\Resources\Pages\CreateRecord;

class CreateRegistration extends CreateRecord
{
protected static string $resource = RegistrationResource::class;

// Define event listeners
protected function getListeners(): array
{
return [
'imageCaptured' => 'handleImageCaptured',
];
}

// Handle the image capture event
public function handleImageCaptured($dataUri)
{
\Log::info('Captured image received:', ['dataUri' => $dataUri]);

// Convert the base64 image and save it
$fileName = 'webcam_photo_' . time() . '.jpg';
$filePath = $this->base64ToImageFile($dataUri, $fileName);
    $filePaths = 'uploads/webcam/' . $fileName;
// Trigger the event in the RegistrationResource with the file path
    //$this->dispatch('imageSaved', [$filePath]);
    //$this->dispatch('imageSaved', [$fileName]);
  //$this->dispatch('fillPhotoField', $filePath);
//$this->dispatch('App\Filament\Resources\RegistrationResource', 'imageSaved', $filePaths);
    $this->dispatch('App\Filament\Resources\RegistrationResource', 'fillPhotoField', $filePaths);

}

public function base64ToImageFile($base64, $fileName)
{
$data = explode(',', $base64);
$decodedData = base64_decode($data[1]);

$path = public_path('uploads/webcam/' . $fileName);

if (!file_exists(dirname($path))) {
mkdir(dirname($path), 0755, true);
}

file_put_contents($path, $decodedData);

return 'uploads/webcam/' . $fileName;
}
}

In My registrationResource, I have tried this

 protected function getListeners(): array
    {
        return [
            'fillPhotoField' => 'setPhotoField',
        ];
    }

    public function setPhotoField($filePath)
    {
        Log::info('fillPhotoField event triggered with data: ' . $filePath);

        $this->form->fill([
            'photo' => $filePath, // Fill the photo field with the file path
        ]);
    }

what am I missing?

[dlespinosa365]

can you resolve the issue?