Laravel Livewire uploads file only after second submit / button press - laravel

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>

Answer 1

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.