State property types vs arrays

[bmartus]

I've got a typed property on a wizard step component and when that component is loaded when navigating between steps, I'm getting Cannot assign array to property ....

Is there a reason the wizard converts all properties to arrays? Or am I missing something to keep the defined types?

Thanks!

edit if I remove the type on the property, things seem to work fine (and it remains the proper type as I update and navigate between steps. 🤔

[Catlike14]

Hi, I have the same problem but I haven't the type on the property. Can you share how did you make it work?
I have a wizard where user can upload images, but when I go back, the image turns into array, so I have to store it temporary and save the path between the property, but it is very ugly, also because I can't validate it as a file.

[ju5t]

Is there a reason the wizard converts all properties to arrays?

I don't think the wizard converts data, but it does use arrays to store state. Perhaps something is off there.

[Catlike14]

Here a test:

use Livewire\WithFileUploads;
use Spatie\LivewireWizard\Components\StepComponent;

class Logo extends StepComponent
{
    use WithFileUploads;

    public $logo;

    protected function rules()
    {
        return [
            'logo' => ['required', 'file', 'image'],
        ];
    }

    public function setLogo()
    {
        $this->validate();
        $this->nextStep();
    }

    public function render()
    {
        return view('livewire.wizard.logo');
    }
}

                        <div x-data="{ isUploading: false, progress: 0 }"
                            x-on:livewire-upload-start="isUploading = true; progress = 0"
                            x-on:livewire-upload-finish="isUploading = false"
                            x-on:livewire-upload-error="isUploading = false"
                            x-on:livewire-upload-progress="progress = $event.detail.progress">

                            <input type="file" class="hidden" wire:model="logo" x-ref="logo" />

                            @if ($logo)
                                <img src="{{ $logo->temporaryUrl() }}">
                            @endif

                            <div x-show="isUploading">
                                <progress max="100" x-bind:value="progress"></progress>
                            </div>

                            <x-jet-secondary-button x-show="!isUploading" type="button" x-on:click.prevent="$refs.logo.click()">
                                {{ ($logo) ? __('Change image') :  __('Select an image') }}
                            </x-jet-secondary-button>

                        </div>
                        @error("logo")<span>{{ $message }}</span>@enderror

                       <div wire:click="setLogo">
                          Next
                       </div>

I can upload the image and I see the preview, but when I click "next" and then I go back, I get

Call to a member function temporaryUrl() on array

And $logo becomes

array (
  'disk' => 'local',
)

[bmartus]

For mine, I send an ID in with the wizard component (since I'm always editing an existing entity in my wizard) and save it on the first step's state.

Then in mount() on each step, I load up the object.

class FirstStepComponent extends StepComponent
{
    public $thing;

    public function mount()
    {
        $this->thing = Thing::find($this->state()->forStep('first-step')['thingId']);
    }
}

It was converting to an array and giving the Cannot assign array to property... when I had it like:

class FirstStepComponent extends StepComponent
{
    public Thing $thing;

    public function mount()
    {
        $this->thing = Thing::find($this->state()->forStep('first-step')['thingId']);
    }
}

I haven't had a chance to dig in too deep yet, but maybe the laravel-livewire-wizard package is setting that $thing property to an array, and then my mount() is overriding it and changing it back to a Thing type?

[Catlike14]

I think that the problem is this related to this. In your case you can fix handling the id. in my case (images) I have to store them temporarly and save the path, so I'll have to do a garbage collector. :\

[bmartus]

Didn't know about this .. I'll have to give protected properties a try and see how it works.