I had this method working before with mysql database but as i have switched my environment to postgresql I got this error.
Facade\Ignition\Exceptions\ViewException
SQLSTATE[HY093]: Invalid parameter number: parameter was not defined
(SQL: select "teachers".*, "student_likes"."student_id" as "pivot_student_id",
"student_likes"."liked_teacher_id" as "pivot_liked_teacher_id"
from "teachers" inner join "student_likes" on "teachers"."id" = "student_likes"."liked_teacher_id"
where "student_likes"."student_id" = 1 and "liked_teacher_id" in (1))
(View: /home/leno/sites/schooly/resources/views/student/likes/index.blade.php)
basically I am trying to perform a match system if both users have liked each other and only display the users if they are a match.
public function matchedTeachers()
{
return $this->likedTeachers()->whereIn('liked_teacher_id', $this->likedStudents->keyBy('liked_teacher_id'));
}
public function likedTeachers()
{
return $this->belongsToMany(Teacher::class, 'student_likes', 'student_id', 'liked_teacher_id');
}
public function likedStudents()
{
return $this->belongsToMany(Student::class, 'teacher_likes', 'teacher_id', 'liked_student_id');
}
#foreach (current_student()->matchedTeachers as $teacher)
<div class="flex flex-col border hover:shadow-lg border-darkindigo-100 rounded-lg">
<div class="flex-1 px-3">
<img src="{{ $teacher->avatar }}" class="block lg:w-20 lg:h-20 rounded-full shadow-xl mx-auto -mt-0 h-20 w-20 bg-cover bg-center object-cover mb-4 mt-4">
<img src="{{ $teacher->teacher_avatar }}" class="block lg:w-10 lg:h-10 rounded-full border-2 border-teal-400 shadow-xl mx-auto -mt-12 ml-32 h-20 w-20 bg-cover bg-center object-cover mb-4 border:z-10">
<div class="text-sm lg:text-lg font-lato font-bold text-gray-800 capitalize text-center leading-8">{{ $teacher->name }}</div>
<div class="text-sm lg:text-sm font-lato font-bold text-gray-700 capitalize text-center">{{ $teacher->language }}</div>
</div>
</div>
#endforeach
Related
I have a "Route (Model)" which has many "PickupRequest".
I made a component that displays all components as two lines of text. However, if it's the "currentRequest" (we go through each one one by one), I display another Livewire component.
In my modal, I want to sent the event to "RequestsList" in order to go to the next request and refresh the list to display the right request. The update is made in the DB, but the content of the page doesn't change.
Here is my code:
List:
<?php
namespace App\Http\Livewire\Routes;
use App\Models\PickupRequest;
use App\Models\Route;
use Livewire\Component;
class RequestsList extends Component
{
public Route $route;
public $requests;
public PickupRequest $currentRequest;
protected $listeners = ['nextRequest' => 'nextRequest'];
public function mount() {
$this->requests = $this->route->requestsWithDone;
}
public function booted() {
$this->currentRequest = $this->route->requests()->first();
}
public function nextRequest() {
$this->currentRequest = $this->route->requests()->first();
}
public function render()
{
return view('livewire.routes.requests-list');
}
}
====
<div>
#livewire('routes.in-progress', ['request' => $currentRequest])
#foreach($requests as $request)
#if($request->id != $currentRequest->id)
<div class="overflow-hidden bg-white shadow sm:rounded-lg cursor-pointer mb-4" wire:key="r_{{ $request->id }}">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">{{ $request->user->short_address }}
<p class="tw-badge {{ $request->status_color }}">{{ $request->status_text }}</p>
</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">{{ $request->user->special_instructions }}</p>
</div>
</div>
#endif
#endforeach
</div>
InProgress:
<?php
namespace App\Http\Livewire\Routes;
use App\Models\PickupRequest;
use App\Models\Route;
use Livewire\Component;
class InProgress extends Component
{
public PickupRequest $request;
public function render()
{
return view('livewire.routes.in-progress');
}
}
===
<div class="overflow-hidden bg-white shadow sm:rounded-lg mb-4" wire:key="ip_{{ $request->id }}">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6 text-gray-900">{{ $request->user->short_address }}</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">{{ $request->user->special_instructions }}</p>
</div>
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">{{ __('routes.pickup.full_address') }}</dt>
<dd class="mt-1 text-sm text-gray-900">{{ $request->user->full_address }}</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">{{ __('routes.pickup.special_instructions') }}</dt>
<dd class="mt-1 text-sm text-gray-900">{{ $request->user->special_instructions }}</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">{{ __('routes.pickup.phone_number') }}</dt>
<dd class="mt-1 text-sm text-gray-900">{{ $request->user->phone }}</dd>
</div>
<div class="sm:col-span-2">
<dt class="text-sm font-medium text-gray-500">{{ __('routes.pickup.bags') }}</dt>
</div>
<div class="flex flex-row space-x-2 justify-end sm:col-span-2 flex-wrap">
<x-button class="red-button hover:red-button mt-1"
wire:click="$emit('openModal', 'routes.modal.couldnt-pickup', {{ json_encode(['pickup_id' => $request->id]) }})">
{{ __('routes.pickup.cant_pickup') }}
</x-button>
<x-button class="mt-1">{{ __('routes.pickup.add_bag') }}</x-button>
<x-button class="green-button mt-1">{{ __('routes.pickup.end') }}</x-button>
</div>
</dl>
</div>
</div>
Modal (only PHP, the blade is irrelevant imo):
<?php
namespace App\Http\Livewire\Routes\Modal;
use App\Models\PickupRequest;
use Illuminate\Support\Facades\Gate;
use LivewireUI\Modal\ModalComponent;
class CouldntPickup extends ModalComponent
{
public PickupRequest $pickup;
public function mount($pickup_id)
{
$pickup = PickupRequest::findOrFail($pickup_id);
Gate::authorize('update', $pickup);
$this->pickup = $pickup;
}
public function update()
{
Gate::authorize('update', $this->pickup);
if($this->pickup->is_active) {
$this->pickup->couldnt_pickup_at = now();
$this->pickup->save();
}
$this->emit('nextRequest');
$this->closeModal();
}
public function render()
{
return view('livewire.routes.modal.couldnt-pickup');
}
}
If the current livewire component is not directly the children of the recipient of the Emit event you are sending then you should use
$this->emitUp('nextRequest');
To refresh the whole component after you have made the request without reloading the page then you should use the magic function $refresh, the details can be found here, https://laravel-livewire.com/docs/2.x/actions#magic-actions
protected $listeners = ['reloadContent' => '$refresh'];
$this->emit('reloadContent');
The key is supposed to be on the top elements in the parent Livewire component. The key shouldn't be set in the component file in InProgress.
/* i have one balde that i use for uploading the images "createEvent.blade.php" then i try to retrive it in 2 baldes "indexEvent.blade.php" and "events.blade.php" the images stored in "/storage/app/public/img" and i run "php artisan storage:link
" every thing is fine in my localhost the imges uploaded and displayed fine, but when i upload my website to the server it still uploade the imge but not displying it. i try to figur out that but nothing work. any one can help. */
the controller i use to store the imges and updated
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Carbon\Carbon;
use App\Models\Event;
use App\Models\EventAttendies;
use URL;
use Session;
use Redirect;
use Input;
use Maatwebsite\Excel\Facades\Excel;
use App\Exports\EventAttendiesExport;
class EventController extends Controller
{
//admin saide
public function index()
{
$data['events'] = Event::orderBy('id','desc')->paginate(20);
return view('dashboard.admin.indexEvent', $data);
}
public function create()
{
return view('dashboard.admin.createEvent');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'description' => 'required',
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
'date' => 'required',
'place' => 'required',
'event_type' => 'required',
'status' => 'required',
]);
$path = $request->file('image')->store('public/img');
$event = new Event;
$event->title = $request->title;
$event->description = $request->description;
$event->date = $request->date;
$event->place = $request->place;
$event->event_type = $request->event_type;
$event->image = $path;
$event->status = $request->status;
$event->save();
return redirect()->route('events.index')
->with('success','Event has been created successfully.');
}
public function show(Event $event)
{
return view('dashboard.admin.indexEvent',compact('event'));
}
public function edit(Event $event)
{
return view('dashboard.admin.eventEdit',compact('event'));
}
public function update(Request $request, $id)
{
$request->validate([
'title' => 'required',
'description' => 'required',
'date' => 'required',
'place' => 'required',
'event_type' => 'required',
'status' => 'required',
]);
$event = Event::find($id);
if($request->hasFile('image')){
$request->validate([
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
]);
$path = $request->file('image')->store('public/img');
$event->image = $path;
}
$event->title = $request->title;
$event->description = $request->description;
$event->date = $request->date;
$event->place = $request->place;
$event->event_type = $request->event_type;
$event->status = $request->status;
$event->save();
return redirect()->route('events.index')
->with('success','Event updated successfully');
}
// Event Show "events.blade.php" user side
public function event()
{
$data['events'] = Event::orderBy('id','desc')->where('status','1')->get();
return view('events', $data);
}
}
here my from from admin side to uploade the images
<form action="{{ route('events.store') }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="overflow-hidden sm:rounded-md">
<div class="px-4 py-5 sm:p-2">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700">Event Title</label>
<input type="text" name="title" id="title" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm">
</div>
<div class="col-span-6 sm:col-span-6">
<label for="description" class="block text-sm font-medium text-gray-700">Event Description</label>
<input type="text" name="description" id="description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm">
</div>
<div class="col-span-6">
<label for="place" class="block text-sm font-medium text-gray-700">Event Place</label>
<input type="text" name="place" id="place" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm">
</div>
<div class="col-span-6 sm:col-span-4">
<label for="date" class="block text-sm font-medium text-gray-700">Event Date</label>
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
</div>
<input datepicker="" datepicker-autohide="" name="date" id="date" type="text" class=" border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full pl-10 p-2.5 datepicker-input" placeholder="Select date">
</div>
<input class="hidden" name="event_type" value="Free" id="event_type">
<!--- <div class="col-span-6 sm:col-span-3">
<label for="event_type" class="block text-sm font-medium text-gray-700">Event Type</label>
<select id="event_type" name="event_type" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none sm:text-sm">
<option value="free">Free</option>
<option value="paid">Paid</option>
</select>
</div> -->
<div class="col-span-6 sm:col-span-3">
<label for="status" class="block text-sm font-medium text-gray-700">Event Status</label>
<select id="status" name="status" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none sm:text-sm">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</div>
<div class="col-span-6 sm:col-span-4">
<label for="date" class="block text-sm font-medium text-gray-700">Event Photo</label>
<input type="file" name="image" class="form-control" placeholder="Event Title">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Add</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="close-Addmodal">Cancel</button>
</form>
here i retrive the image in admin side
#foreach ($events as $event)
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ $event->title }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $event->description }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<span class="font-medium">{{ $event->date }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<img class="w-6 h-6 rounded-full border-gray-200 border -m-1 transform hover:scale-125" src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td class="py-3 px-6 text-center">
#if(($event->status)==1)
<span class="bg-purple-200 text-purple-600 py-1 px-3 rounded-full text-xs">Active</span>
#else
<span class="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs">Pending</span>
#endif
<!--<span class="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs">Completed</span>-->
here i retrive the imge in user side
#foreach ($events as $event)
<div class="w-full #if($events->count()>=2) md:w-1/2 #endif px-4">
<div class="bg-white shadow-lg rounded-lg overflow-hidden mb-10">
<img class="eventsPic w-full" style="background-image:url({{ Storage::url($event->image) }});"/>
<div class="p-8 sm:p-9 md:p-7 xl:p-9 text-center">
<h3>
<a href="javascript:void(0)"
class=" font-semibold text-dark text-xl sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] mb-2 block hover:text-primary " >
{{ $event->title }}
</a>
</h3>
<p class="text-base text-body-color leading-relaxed">
{{ $event->description }}
</p>
<p>{{ ucfirst($event->event_type) }}</p>
<p>{{ $event->place }}</p>
<p>{{ $event->date }}</p>
<a id="Regis" data-event-id="{{$event->id}}" data-title="{{ $event->title }}" data-event-type="{{ $event->event_type }}"
href="javascript:void(0)"
class="register-btn inline-block py-2 px-12 border rounded-full text-base text-body-color font-medium hover:border-red-700 hover:bg-red-700 hover:text-white transition">
{{__('sniperTrans.Register')}}
</a>
</div>
</div>
</div>
#endforeach
the problem was I deployed it via GitHub and i do not give the permission to write.
I am getting below shown error in Laravel website. The goal over here is to display the product. I have also shared the image of the error on this issue log. Kindly check and let me know where the issue is as I am not able to figure out.
I am running the laravel project locally. Any suggestion or help from the Laravel community is welcomed. Please help so that I can proceed further.
ErrorException
Trying to get property 'title' of non-object (View: C:\DK\Practice\Laravel\example-app\resources\views\product.blade.php)
Illuminate\Foundation\Bootstrap\HandleExceptions::handleError
C:\DK\Practice\Laravel\example-app\resources\views/product.blade.php:9
<x-base-layout>
<div class="flex m-4">
<div class="w-1/2 rounded shadow overflow-hidden">
{{-- <img class="object-cover w-full" src="{{asset($product->image_url)}}"/> --}}
</div>
<div class="w-1/2 rounded bg-white ml-2 p-4 shadow relative">
<div class="font-semibold">{{$product->title}}</div>
<div class="text-sm text-gray-500">{{$product->short_desc}}</div>
<div class="text-xs text-gray-500 mt-2">{{$product->long_desc}}</div>
{{-- Seller info --}}
<div class="mt-4">
<div class="text-xs font-semibold text-gray">Sold by</div>
<div class="text-sm text-gray-500">{{$product->user->name}}</div>
</div>
1 - product.blade.php
<x-base-layout>
<div class="flex m-4">
<div class="w-1/2 rounded shadow overflow-hidden">
{{-- <img class="object-cover w-full" src="{{asset($product->image_url)}}"/> --}}
</div>
<div class="w-1/2 rounded bg-white ml-2 p-4 shadow relative">
<div class="font-semibold">{{$product->title}}</div>
<div class="text-sm text-gray-500">{{$product->short_desc}}</div>
<div class="text-xs text-gray-500 mt-2">{{$product->long_desc}}</div>
{{-- Seller info --}}
<div class="mt-4">
<div class="text-xs font-semibold text-gray">Sold by</div>
<div class="text-sm text-gray-500">{{$product->user->name}}</div>
</div>
<div class="mt-2">
<div class="text-xs font-semibold text-gray">Phone number</div>
#auth
<div class="text-sm text-gray-500">{{$product->user->phone}}</div>
#else
<div class="text-sm text-gray-500">********** Login to view</div>
#endauth
</div>
<div class="mt-2">
<div class="text-xs font-semibold text-gray">Email address</div>
#auth
<div class="text-sm text-gray-500">{{$product->user->email}}</div>
#else
<div class="text-sm text-gray-500">********** Login to view</div>
#endauth
</div>
{{-- Product price --}}
<div class="absolute bottom-0 right-0 m-6 rounded-full px-4 py-2 bg-green-500">
<div class="text-white font-fold text-sm">Rs. {{$product->price}}/-</div>
</div>
</div>
</div>
</x-base-layout>
2 - ProductsController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
use Illuminate\Support\Facades\Auth;
class ProductsController extends Controller
{
//fetch all products
public function index() {
$products=Product::all();
return view('products')->with('products',$products);
}
//Fetch a product by id
public function show($id){
$product=Product::find($id);
return view('product')->with('product',$product);
dd($product);
}
3 - Route - web.php
<?php
use App\Http\Controllers\ProductsController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
Route::get('/',[ProductsController::class,'index']
);
Route::get('/product/{id}',[ProductsController::class,'show']);
Error screenshot:
I think, you have a little prob in your show() method. What happen if the find method return a null? You will exactly get what you are getting, trying to access a property on null object.
Change you code as bellow, and then you'll get a 404 Not found.
//Fetch a product by id
public function show($id){
$product=Product::findOrFail($id);
return view('product')->with('product',$product);
dd($product); // This will never be executed.
}
I've built a nested comment system and it works fine, but I have a problem.
when I want to show the comments, it runs too many queries. for example if I have 10 comments and two replies each, laravel debugger shows 40+ queries, and I want to reduce them, here is my code :
Query
$comments = $post->mentions()->with(['author', 'reply'])->get();
Relationship in Post.php Model
public function mentions()
{
return $this->hasMany(Comment::class, 'post_id')->where('approved',1)->where('parent_id',0);
}
Comments Relationships
public function author()
{
return $this->belongsTo(User::class, 'author_id')->select('id', 'name', 'avatar', 'role');
}
public function reply()
{
return $this->hasMany(Comment::class, 'parent_id')->where('approved', 1);
}
Blade File
#foreach ($comments as $comment)
<div x-data="{reply:false}" class="break-words bg-white border-2 rounded-lg p-4 my-5" id="answer-{1}">
<div wire:ignore class="flex justify-between items-center">
<div class="flex items-center">
<img class="rounded-full w-20 border-4 #if ($comment->author->role == 'administrator') border-blue-500 #else border-gray-500 #endif " src="{{ $comment->author->avatar }}"
alt="{{ $comment->author->name }}">
<div>
<div class="flex pr-3">
<a href="/#username"
class="font-bold text-lg text-gray-800 hover:text-gray-900">{{ $comment->author->name }}</a>
#if ($comment->author->role == 'administrator')
<img class="w-5 mr-1" src="/img/verified.svg" alt="" title="admin">
#endif
</div>
<p class="font-light cursor-default text-gray-700 pt-1 pr-3">
{{ $comment->created_at->diffForHumans() }}</p>
</div>
</div>
<svg #click="reply = true" xmlns="http://www.w3.org/2000/svg" class="h-6 cursor-pointer hover:text-rose-600"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
</svg>
</div>
<div class="comment_body leading-8 pt-3 text-gray-800 cursor-default">
<div wire:ignore>
{!! nl2br($comment->body) !!}
</div>
<div x-cloak x-show="reply">
<form class="py-3" wire:submit.prevent="SubmitComment({{ $comment->id }})">
<textarea wire:model.defer="commentBody"
class="w-full focus:ring-0 bg-zinc-200 border shadow focus:bg-zinc-100 mt-3 p-4 rounded-lg"
id="editor" rows="6" placeholder=""></textarea>
#error('commentBody') <p class="text-red-600 mt-1 text-sm">{{ $message }}</p>
#enderror
<div class="flex mt-3">
<div #click="reply = false"
class="bg-red-600 rounded-lg ml-3 text-white px-3 py-2 cursor-pointer">
Cancel
</div>
<button wire:loading.remove wire:target="SubmitComment" type="submit"
class="inline-block bg-gray-800 hover:bg-gray-900 transition duration-300 px-3 py-2 text-white rounded-md">
Send
</button>
<button wire:loading="" wire:target="SubmitComment" type="button"
class="flex bg-gray-800 hover:bg-gray-900 transition duration-300 px-3 py-2 text-white rounded-md"
disabled>
<span class="flex justify-center">
<svg class="animate-spin w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</button>
</div>
</form>
</div>
<div class="my-3">
#include('partials.comment',['comments'=>$comment->reply])
</div>
</div>
</div>
#endforeach
You can use dot seperator to get the nested relationship
$comments = $post->with(['mentions.author','mentions.reply'])
->first()
->mentions;
Weird issue with my Livewire: the validation, when I send a file, always fails on the first time. If I have the criteria that it must be a pdf, I will put the PDF, submit the form, get a message telling me I have the wrong format, I won't change anything, resubmit and it will go through with no issue.
Does anyone knows why it might be happening?
<?php
namespace App\Http\Livewire\Branch\Documents;
use App\Models\BranchDocument;
use Livewire\Component;
use Livewire\WithFileUploads;
class Upload extends Component
{
use WithFileUploads;
public BranchDocument $document;
public $file;
public $saved = false;
public function render()
{
return view('livewire.branch.documents.upload');
}
public function save() {
$this->validate([
'file' => 'mimes:jpg,bmp,png,pdf|max:10240', // 1MB Max
]);
$this->document->file = $this->file;
$this->saved = true;
}
}
<div x-data="{ open: false }">
<li class="#if(!$saved) hover:bg-gray-100 py-2 px-2 rounded cursor-pointer #endif" #click="open = true">
<div class="relative">
<div class="relative flex space-x-3">
<div class="min-w-0 flex-1 flex justify-between space-x-4 items-center">
<div>
<p class="text-sm text-porange">{{ $document->document_type->title }}#if($saved)<span class="text-sm text-gray-600"> - {{ __('Document sent!') }}</span>#endif</p>
<p class="text-xs text-gray-600">{{ $document->created_at->diffForHumans() }}</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
#if(!$saved)
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
#else
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
#endif
</svg>
</div>
</div>
</div>
</li>
#if(!$saved)
<div x-show="open" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div #click.away="open = false" class="inline-block align-bottom bg-white rounded-lg px-4 py-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{{ __('Upload ":title"', ['title' => $document->document_type->title])}}
</h3>
</div>
</div>
<form wire:submit.prevent="save">
<input type="file" wire:model="file" class="file-input-business block mx-auto mt-4"/>
#error('file') <span class="error">{{ $message }}</span> #enderror
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<button type="submit" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-porange text-base font-medium text-white hover:bg-porange-darker focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:col-start-2 sm:text-sm">
{{ __('Send')}}
</button>
<button #click="open = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:mt-0 sm:col-start-1 sm:text-sm">
{{ __('Cancel')}}
</button>
</div>
</form>
</div>
</div>
</div>
#endif
</div>
Thank you!
Is the file uploaded before you hit submit? If not then the file is null hence the wrong format error. Check its value in the save method before validation. You can also use wire.loading on a div to determine if the file is still uploading.
You may also run into issues with built in artisan development server (the one you start with php artisan serve command). It has different limitations to a 'real' server - upload file size, formats, etc.