Level 74
I haven't used Livewire, but my guess is that you still need to tell it that the form is multipart to be able to upload files.
enctype="multipart/form-data">
Dec 2, 2022
22
Level 18
Livewire uploads is not working
I have no idea what's wrong with my code, I have followed every step of Caleb's tutorial on uploading. (I'm a beginner in livewire)
Here are the livewire components.
<?php
namespace App\Http\Livewire;
use App\Models\Message;
use Livewire\Component;
use Livewire\WithFileUploads;
class AddMessage extends Component
{
use WithFileUploads;
public $file;
public $message = '';
public $channel;
protected $rules = [
'message' => ['required'],
'file' => 'image'
];
public function addMessage()
{
$this->validate();
$filename = $this->file->store('/', 'fileuloads');
Message::create([
'body' => $this->message,
'shop_id' => session()->get('shop_id'),
'channel_id' => $this->channel->id,
'user_id' => auth()->user()->id,
'filename' => $filename,
]);
$this->message = '';
}
public function render()
{
return view('livewire.add-message');
}
}
Here is the form
<form wire:submit.prevent="addMessage" action="" class="max-w-md mx-auto mt-8 mb-0 space-y-4">
@csrf
<div>
<label for="message" class="sr-only">Message</label>
<div class="relative">
<input wire:model="message" type="text" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm" placeholder="Enter message" />
</div>
@error('message')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="flex items-center justify-between">
<div><input wire:model="file" type="file" name="file" id="file"></div>
<button type="submit" class="inline-block px-5 py-3 ml-3 text-sm font-medium text-white bg-blue-500 rounded-lg">
Post now
</button>
</div>
</form>
Actually, I received an error message until I added the validation on the file property. Now I'm getting no feedback whats wrong at all.
Level 22
@dave wize what error message do you get before added validation? And add validation error message for file input to see if there is any validation error on file input.
<div><input wire:model="file" type="file" name="file" id="file"></div>
@error('file') <span class="error">{{ $message }}</span> @enderror
Level 102
What error? The error you got might be exactly what we need :)
Level 18
@Sinnbeck The error is only: The file failed to upload.
Level 102
@Dave Wize Check if you have FILESYSTEM_DRIVER set in .env. Make sure it has a value (or remove it)
Level 18
@Sinnbeck And without the validation it throws this error Call to a member function store() on null
Level 18
Level 102
@Dave Wize No its ok. And I thought that was the error without validation. Ill see if I can recreate it :)
Is the html shown the full view file or is there more?
Level 18
@Sinnbeck Here is the full livewire view.
<div>
<!--
This component uses @tailwindcss/forms
yarn add @tailwindcss/forms
npm install @tailwindcss/forms
plugins: [require('@tailwindcss/forms')]
-->
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
<div class="max-w-lg mx-auto text-center">
<h1 class="text-2xl font-bold sm:text-3xl">Post a message on {{ $channel->name }}!</h1>
<p class="mt-4 text-gray-500">
Whats on your mind
</p>
</div>
<form wire:submit.prevent="addMessage" action="" enctype="multipart/form-data" class="max-w-md mx-auto mt-8 mb-0 space-y-4">
@csrf
<div>
<label for="message" class="sr-only">Message</label>
<div class="relative">
<input wire:model="message" type="text" class="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-sm" placeholder="Enter message" />
</div>
@error('message')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="flex items-center justify-between">
<div>
<input wire:model="file" type="file" name="file" id="file">
@error('file')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<button type="submit" class="inline-block px-5 py-3 ml-3 text-sm font-medium text-white bg-blue-500 rounded-lg">
Post now
</button>
</div>
</form>
</div>
</div>
Level 18
@Sinnbeck And now the basic error it gives me is.
The file field is required.
Although I'm choosing an image to upload.... weird
Level 102
@Dave Wize Its very weird. I copy pasted your code into a livewire project and added the component to a page. When I submit it uploads the file without any issues (I removed the enctype again as it isnt needed).
Any chance you can make a demo repo with the issue to I can try debugging it directly ?
Level 74
@Dave Wize Sound to me like you need this on your form
enctype="multipart/form-data"
Level 18
@Sinnbeck Can I add you as a collaborator on my private repo?
Level 102
@Dave Wize Sure. Same username as here
Level 18
@Sinnbeck I have garnt you access
Level 24
@Dave Wize your code seems nothing wrong, i guess is reached server post size limit
Level 102
@Dave Wize Ok. I can see you havent added any seeders so it will need to edit your code alot to get it working, as I am not going to manually add all the data needed to get this working.
Level 102
Got it working by removing the foreach in thread.blade.php, and changing the disk to local in config/livewire.php
So maybe your webserver is the problem. Try php artisan serve
Level 18
@Sinnbeck Weird, because I tried the artisan serve and it is still not working. I will have to try it on my computer at work. (I'm now working on my laptop). Thanks anyway
Level 102
@Dave Wize Happy to help :) Maybe if you added some seeders to set up a working version of the app I could test with all data. The bug could be in the code I deleted (even though I could not see anything as such)
Level 18
@Sinnbeck So I'm starting to figure out what's wrong with the uploads on my end. I'm getting a CORS error. And the Referrer-Policy: strict-origin-when-cross-origin.
I wonder what may have caused this issue in my local development env. Any clues?
Level 24
your file size very large ? any server error log or laravel error log ?
Please or to participate in this conversation.