Ah, thank you. I hadn't realized that wire:loading only changed the class temporarily while loading. Your explanation makes a lot of sense.

It still left me with a problem, because I wanted the metadata button to start off disabled and only become enabled after a file was uploaded. After some thought, I got around the problem by adding an $uploaded variable to my component:

public $uploaded = false;

and replaced the wire:loading in my button code with a conditional class:

class="{{ $uploaded ? 'btn btn-sm btn-success': 'btn btn-sm btn-disabled' }}"

Then I set $uploaded = true after the file upload completes. This seems to be working correctly now, though I don't know if there's a better way to do it.

I'm using Laravel with Livewire 4, and I've built a form that has some input fields and two buttons. One button lets the user upload a file:

<button type="submit" class="btn btn-sm btn-success">Upload file</button>

And another lets them save some metadata describing the file. However, because the uploaded files have the potential to be quite large and take a while to load, I want this second button to be disabled until the file upload finishes. I attempted to code it like this:

<button wire:click="saveMetadata" class="btn btn-disabled" wire:loading.class.remove="btn btn-disabled">Save Metadata</button>

but while the file uploads successfully, the saveMetadata button remains disabled afterwards. Is there something else I need to be doing?

I'm trying to follow the tutorial, but when I entered "php artisan make:livewire counter --inline" I got an error saying The "--inline" option does not exist. I have livelier 4.3.0 installed, is something different there?

Yes, after I click "Create account," I stay on the form. The focus changes back to the first input field ("Name"), but no error message appears.

Also, I did go through the Laravel Bootcamp seriesl, I'm not sure how similar it is to the one you linked.

Hello.

I'm using Laravel 13.5.0 with Livewire starter kit. I've added four new fields to my users model in Laravel: "organization", which is required, "orcid" and "orgurl", which are optional, and "role", which is optional and also not entered by the user on the registration page but to be left as null until set separately by the website admin. I made "orcid", "orgurl" and "role" nullable in the database. I set "organization", "orgurl" and "orcid" as Fillable in User. php, and made the following code changes:

In register.blade.php:

<div class="flex items-center gap-4">
            <label for="organization" class="text-sm font-medium text-zinc-700">Organization*</label>
            <flux:input
                name="organization"
                type="text"
                required
                autocomplete="organization"
                :placeholder="__('organization')"
            />
 </div>
<div class="flex items-center gap-4">
            <label for="orgurl" class="text-sm font-medium text-zinc-700">Organization URL</label>
            <flux:input
                name="orgurl"
                type="text"
                nullable
                autocomplete="organization url"
                :placeholder="__('organization url')"
            />
 </div>

and

<div class="flex items-center gap-4">
            <label for="orcid" class="text-sm font-medium text-zinc-700">Orcid ID</label>
            <flux:input
                name="orcid"
                type="text"
                nullable
                autocomplete="orcid ID"
                :placeholder="__('orcid ID')"
            />
 </div>

In CreateNewUser.php, I added these lines to User::create

'orcid' => $input['orcid'],
 'organization' => $input['organization'],
'orgurl" => $input[''orgurl'],

In ProfileValidationRules, I added two new rules:

/** 
     * Validate required contact fields
    * @return array<int, ValidationRule|array<mixed>|string>
    */
    protected function contactReqRules(): array
    {
        return ['required', 'string', 'max:255'];
    }

    /** 
     * Validate optional contact fields
    * @return array<int, ValidationRule|array<mixed>|string>
    */
    protected function contactOptRules(): array
    {
        return ['nullable', 'string', 'max:255'];
    }

And added the following to profileRules:

'orcid' => $this->contactOptRules(),
 'organization' => $this->contactReqRules(),
 'orgurl' => $this->contactOptRules(),

If I then try to register a new user account, I don't get any errors, but the account doesn't get created either. The register page stays where it is, and nothing is saved to the database. I'm guessing that this is because I'm not doing any handling for the "role" field, but I'm not sure what I'm supposed to do for it. I'm new to Laravel and Livewire, so help, please?