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  @click="open = true">
        <div >
          <div >
            <div >
              <div>
                <p >{{ $document->document_type->title }}@if($saved)<span > - {{ __('Document sent!') }}</span>@endif</p>
                <p >{{ $document->created_at->diffForHumans() }}</p>
              </div>
                <svg xmlns="http://www.w3.org/2000/svg"  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"  aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div >
          <!--
            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  aria-hidden="true"></div>

          <!-- This element is to trick the browser into centering the modal contents. -->
          <span  aria-hidden="true">&#8203;</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" >
            <div>
              <div >
                <h3  id="modal-title">
                  {{ __('Upload ":title"', ['title' => $document->document_type->title])}}
                </h3>
              </div>
            </div>
            <form wire:submit.prevent="save">

            <input type="file" wire:model="file" />
            @error('file') <span >{{ $message }}</span> @enderror

            <div >
              <button type="submit" type="button" >
                {{ __('Send')}}
              </button>
              <button @click="open = false" type="button" >
                {{ __('Cancel')}}
              </button>
            </div>
        </form>
          </div>
        </div>
      </div>
      @endif
</div>

Thank you!

CodePudding user response：

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.