Laravel Livewire uploads file only after second submit / button press

Question

I want to create an almost simple file upload via Laravel/Livewire, but once submitting the form with two inputs and one file input, the form fields focus and standstill. However, after pressing the submit button again, it uploads as anticipated with a success message. How can this be achieved with the first button submit?

Livewire component

namespace App\Http\Livewire\Files;

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\File;

class FilesForm extends Component
{
    use WithFileUploads;

    public $file;
    public $name;
    public $doctype;
    public $doctypes;
    public $doctypeparent;
    public $docs;

    public function mount($id)
    {

        $this->doctypeparent = $id;
    }

    public function save()
    {

        $validatedData = $this->validate([
            'doctype' => 'required',
            'file' => 'required|image|mimes:jpg,jpeg,png,svg,gif|max:10240',
        ]);


        $filename = $this->file->store('files','public');

        $validatedData['content_type_id'] = $this->doctype;
        $validatedData['name'] = $this->name;
        $validatedData['file'] = $filename;
        $validatedData['user_id'] = Auth::id();
        $validatedData['slug'] = uniqid();

        File::create($validatedData);

        session()->flash('message', 'Datei erfolgreich gespeichert.');

        $this->doctype="";
        $this->name="";
        $this->file="";
        $this->render();

        //return redirect()->to('/fileupload');
    }

    public function render()
    {
        $this->doctypes = DB::table('content_type')
        ->select('content_type.id', 'content_type.strTitleDe')
        ->where('content_type.fkintContentGroup', '=', $this->doctypeparent)
        ->orderBy('content_type.intPriority')
        ->get();


        $this->docs = File::all();

        //dd($this->docs);

        return view('livewire.files.files-form');
    }
}

Livewire blade

<div class="file-form">
    <form wire:submit.prevent="save">
        @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
        @endif

        <div class="form-group">
            <label for="name">Typ</label>
            <select class="form-control" id="doctype" name="doctype" wire:model="doctype">
                <option value="">- - -</option>
                @foreach ($doctypes as $doctype)
                <option value="{{ $doctype->id }}">{{ $doctype->strTitleDe }}</option>
                @endforeach
            </select>
            @error('doctype') <span class="error">{{ $message }}</span> @enderror
        </div>
        <div class="form-group">
            <label for="name">Bezeichnung</label>
            <input type="text" class="form-control" max="255" id="name" placeholder="" wire:model="name">
            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        <div class="form-group">
            <div class="custom-file">
                <label for="file">Datei:</label>
                <input type="file" class="form-control" id="file" wire:model="file">
                @error('name') <span class="error">{{ $message }}</span> @enderror
            </div>
        </div>


        <button type="submit" class="btn btn-primary">Speichern</button>
    </form>
    <p></p>
    <h3>Dokumente</h3>
    <table>
        <thead>
        <tr>
            <td>Typ</td>
            <td>Title</td>
        </tr>
        </thead>
        <tbody>
        @foreach($docs as $doc)
        <tr>
            <td>Typ</td>
            <td>{{ $doc->name}}</td>
        </tr>
        @endforeach
        </tbody>
    </table>
</div>

jshook jshook · Accepted Answer · 2021-07-17T23:12:56

Not sure if this helps but.....While it looks like this could work, I never do actual form submits when using livewire - all of the data is bound with wire:model. There's no need to use a form at all. I just use buttons with wire:click and call whatever function saves the file.

Doing it that way I've had zero problems with file uploads.

Laravel Livewire uploads file only after second submit / button press

1 Answers