Live wire file upload sets integer values to null

#1

When I select an image in a livewire component than all the public properties which store an integer value automatically get reset to null.
Right now I have fixed it by typecasting integer values to string but I am looking for a concrete way to doing this.

I am using the latest version of livewire.

Steps to Reproduce:
Just create a component with a public property that contains an array of form fields after that select an image in the UI and the array keys which store some integer value will be set to null automatically.

Code Example:

<?php

namespace App\Http\Livewire\Banner;

use App\Actions\Banner\UpdateBanner;
use App\Models\Banner;
use Livewire\Component;
use Livewire\WithFileUploads;

class EditBannerForm extends Component
{
    use WithFileUploads;

    public $data;

    public function mount($banner): void
    {
        $this->fill([
            'data' => [
                'id'                    => (string)$banner->id,
                'name'                  => $banner->name,
                'description'           => $banner->description,
                'redirect_url'          => $banner->redirect_url,
                'image'                 => null,
                'old_image'             => $banner->getFirstMediaUrl(Banner::$mediaCollection),
                'is_active'             => (string)$banner->is_active,
                'show_in_hero'          => (string)$banner->show_in_hero,
                'show_in_sidebar'       => (string)$banner->show_in_sidebar,
                'show_in_three_layout'  => (string)$banner->show_in_three_layout,
            ]
        ]);
    }

    public function submit(UpdateBanner $updater): void
    {
        $updater->handle($this->data, $this->data['id']);
        $this->resetErrorBag();
    }
    public function render()
    {
        return view('livewire.banner.edit-banner-form');
    }
}

View:

<div>
    <form wire:submit.prevent="submit">
        <div class="col-span-6 my-2 sm:col-span-4">
            <x-jet-label for="name" value="Name *" />
            <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="data.name"  />
            <x-jet-input-error for="name" class="mt-2" />
        </div>

        <div class="col-span-6 my-2 sm:col-span-4">
            <x-jet-label for="description" value="Description" />
            <x-jet-input id="description" type="text" class="mt-1 block w-full" wire:model.defer="data.description" />
            <x-jet-input-error for="description" class="mt-2" />
        </div>

        <div class="col-span-6 my-2 sm:col-span-4">
            <x-jet-label for="redirect_url" value="Banner Link" />
            <x-jet-input id="redirect_url" type="url" class="mt-1 block w-full" wire:model.defer="data.redirect_url" />
            <x-jet-input-error for="redirect_url" class="mt-2" />
        </div>

        <x-form-elements.image-input :data="$data" :editForm="$editForm"/>

        <x-form-elements.is-active-select />

        <div x-data="{ openAccordion: false }" class="mb-3">
            <x-sub-heading :class="'p-3 border'">
                <x-slot name="title">
                    Display Banner
                    <span class="float-right" @click ="openAccordion = !openAccordion">
                        <i class="fas fa-plus-circle" x-show="!openAccordion"></i>
                        <i class="fas fa-minus-circle" x-show="openAccordion"></i>
                    </span>
                </x-slot>
            </x-sub-heading>

            <div class="border p-3" x-show="openAccordion">
                <div class="col-span-6 my-2 sm:col-span-4">
                    <x-jet-label for="show_in_hero" value="Show In Hero" />
                    <x-form-elements.select id="show_in_hero" class="mt-1 block w-full" wire:model.defer="data.show_in_hero">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </x-form-elements.select>
                    <x-jet-input-error for="show_in_hero" class="mt-2" />
                </div>

                <div class="col-span-6 my-2 sm:col-span-4">
                    <x-jet-label for="show_in_sidebar" value="Show In Sidebar" />
                    <x-form-elements.select id="show_in_sidebar" class="mt-1 block w-full"
                                            wire:model.defer="data.show_in_sidebar">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </x-form-elements.select>
                    <x-jet-input-error for="show_in_sidebar" class="mt-2" />
                </div>

                <div class="col-span-6 my-2 sm:col-span-4">
                    <x-jet-label for="show_in_three_layout" value="Show In Three Layouts" />
                    <x-form-elements.select id="show_in_three_layout" class="mt-1 block w-full"
                                            wire:model.defer="data.show_in_three_layout">
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </x-form-elements.select>
                    <x-jet-input-error for="show_in_three_layout" class="mt-2" />
                </div>
            </div>
        </div>

        <x-jet-button>
            Save
        </x-jet-button>
    </form>
</div>
#2

Hey @MohanSharma, Any Code example you can provide?

#3

@skywalker I have updated the question. You can see the code example.

#4

Try to make the image property separate from your form array

....
public $image;
public $form;
...
public fucntion submit(UpdateBanner $updater): void
{
   $this->data = array_merge($this->data, [
     'image' => $this->image
     ]);
   $updater->handle($this->data, $this->data['id']);
    $this->resetErrorBag();
}
Image Uploading - Removing Selected Images
#5

@skywalker Yes it worked, but shouldn’t it be considered a bug?

#6

I don’t think so, but you can open a new discussion in Livewire repository