Custom File upload Component in Livewire Laravel

Question

I am trying to create a reusable Livewire input-file component, Such that :

1. Easy embed in any (parent) and pass the model name (ex = "file1")
2. How to store() the file is in control of (parent) Form

So far, I have created a child component and a parent form. The problem is that in return, I get a "string" and not a file object from Livewire component. Can anyone help in correcting the thing or even suggest how to do it in a better way?

SingleFileUpload(component)

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Modelable;
use Livewire\WithFileUploads;

class SingleFileUpload extends Component
{
    use WithFileUploads; 
    #[Modelable]          // lets parent bind with wire:model="file1"
    public $value = null; // receives TemporaryUploadedFile from Livewire

    /** Public props to customize UI/behavior */
    public string $label   = 'Upload file';
    public string $accept  = '';        // e.g. "image/png,image/jpeg"
    public bool   $multiple = false;    // set true if you enable multi
    public ?string $errorKey = null;    // parent field name for @error display

    public function render()
    {
        return view('livewire.single-file-upload');
    }
}

Blade File

// other code for div styles  ....
    <input
        type="file"
        wire:model.live="value"
        @if($accept) accept="{{ $accept }}" @endif
        @if($multiple) multiple @endif
        class="file-input file-input-bordered w-full"
    />

// Other code for progress bar ...

Usage In parent form Blade

<livewire:single-file-upload wire:model="file1" :label="'Photo 1'" accept="*" :errorKey="'file1'" />

FormCompoenent

class FormComp extends Component
{
 use WithFileUploads; 
 public function save($method)
    {
        $this->validate(); 
        $stored1 = $this->file1->store('frt_api/uploads/' . $timestamped_folder_path); //<--- Fails recived a string instead of file
    }
}

If I dd($this->file1) , I get livewire-file:eCQNvlZlJu4j15E88m9Rt98BXUW4wU-metacGVyZmVjdGNyb3BpY29udXNlci5wbmc=-.png hence unable to figure out how to store it on parent side

Answer 1

Remove #[Modelable], Livewire doesn’t pass the temporary file object that way.
Instead, emit the file to the parent using an event:

Child component:

public function updatedValue($file)
{
    $this->dispatch('fileUploaded', $file);
}

Parent blade:

<livewire:single-file-upload wire:key="file1" />

Parent component:

#[On('fileUploaded')]
public function handleFile($file)
{
    $this->file1 = $file;
}

Now $this->file1 will be a TemporaryUploadedFile and you can call:

$this->file1->store('uploads');

That’s the simplest reliable way to make a reusable file input in Livewire.