Level 122
show your form tag
May 17, 2024
8
Level 1
Livewire does a full page reload when i select a file in the file input
livewire component blade file
<input type="file" wire:model="avatar" class="block w-full text-sm text-temid file:font-standard
file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold
file:bg-accent-primary/20 file:text-accent-primary hover:file:bg-accent-primary/30 file:rounded"/>
livewire component class file
use WithFileUploads;
#[Validate('image|max:1024')]
public $avatar;
public function save()
{
$this->avatar->store(path: 'photos');
}
Level 1
@Snapey i have no form at all in the whole page
Level 1
@Snapey i was going to share a video but i cant share links. The moment i select a file on the input pop up browser, the page reloads. It seems to save the selected file, but i dont know why inmediatly after fires up a page reload.
Level 122
@mcapriulo unless you share code nobody can help
Level 1
audio-upload.blade.php
<form wire:submit="save">
<input type="file" wire:model="audio">
@error("audio") <span class="error">{{ $message }}</span> @enderror
</form>
AudioUpload .php
<?php
namespace App\Livewire;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;
class AudioUpload extends Component
{
use WithFileUploads;
#[Validate('required|max:1024')]
public $audio;
public function save()
{
\Log::info("FINALLY SAVED AUDIO FILE");
$this->audio->store(path: 'public');
}
public function render()
{
return view('livewire.audio-upload');
}
}
its basically copy paste from livewire doc. i also tried without the form and the page still makes a full reload when file is uploaded. (files are uploading ok).
this is the base layout, before you ask, i also removed every script and/or imported library that might be causing trouble.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
@livewireStyles
@stack('scripts')
@vite(['resources/css/app.css','resources/css/tippy.css','resources/css/animations.css', 'resources/css/scoreBar.css',
'resources/css/sideshop_fonts.css','resources/js/app.js'])
</head>
<body class="font-standard antialiased">
<div class="min-h-screen">
<div class="z-10 relative">
@include('layouts.navigation')
</div>
<main>
<livewire:audio-upload />
</main>
</div>
@livewireScriptConfig
@stack('scripts_after_end')
</body>
@include('layouts.footer')
</html>
app.js
import "./bootstrap";
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Tooltip from "@ryangjchandler/alpine-tooltip";
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
window.Quill = Quill;
import.meta.glob([
// '../assets/images/**',
// '../assets/fonts/**',
]);
Alpine.plugin(Tooltip);
Livewire.start();
THE LOG IN THE SAVE FUNCTION IS NEVER EXECUTING
do i need to set up any route in web.php for uploads?
Level 122
@mcapriulo with Livewire 3, you don't need to do anything to load Livewire or Alpine. They are automatically injected.
Level 1
what else could be causing this? i just dont know what to try anymore. I created a new empty project and added that component and the page still reloads.
Level 1
@mcapriulo I have the same problem, but it only happens sometimes, especially on my cell phone. Did you solve it?
Please or to participate in this conversation.