Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

CraigStanfield's avatar

Livewire file upload is not working

Ok so I am trying to get a livewire file upload to work. I expect to select the file and click the the upload button when it is then uploaded into storage. However as soon as i select the file it says File failed to upload and when i click the upload button it says upload field is required. Looking on the internet I found nothing that has worked (removing FILESYSTEM_DISK= from env and using FILESYSTEM_DISK=local) I removed file (replaced with upload) as thought maybe a reserved word. I also checked and changed permissions on storage/app/livewire-tmp - set to 777 still nothing - it does work with image uploads for profile though) whatever I try still it doesn't upload the file. My livewire files as follows:

<?php

namespace App\Http\Livewire;

use App\Models\Job;
use Livewire\Component;
use Livewire\WithFileUploads;

class UploadsTable extends Component
{
    use WithFileUploads;

    public Job $job;
    public $upload;

    protected $listeners =['refresh' => '$refresh'];

    public function mount( Job $job )
    {
        $this->job = $job;
    }

    public function render()
    {
        return view('livewire.uploads-table');
    }

    public function uploadFile()
    {
        $this->validate([
            'upload' => 'required|mimes:aac,ai,aiff,avi,bmp,c,cpp,csv,dat,dmg,doc,dotx,dwg,dxf,eps,exe,glv,gif,h,hpp,ics,iso,java,mp4,mid,mp4,txt,xlx,xls,pdf,jpg,png,php,css,html,js|max:2048'
        ]);

        $this->upload->storeAs('uploads/' . $this->job_number, 'public' );
    }
}

and the blade file

<div>
    <form wire:submit.prevent="uploadFile" method="post">
        @if ( count( $job->files() ) > 0 )
            <table class="{{ getAppearances( 'table', 'class' ) }}">
                <thead>
                <th style="width:5%">&nbsp;</th>
                <th>File Name</th>
                <th>Open</th>
                </thead>
                <tbody>
                @foreach( $job->files() as $file )
                    <tr class="p-1 odd:bg-gray-200 even:bg-gray-50 odd:dark:bg-gray-700 even:dark:bg-gray-800">
                        <td><img src="{{ $file->extImg }}"/></td>
                        <td>{{ $file->name }}</td>
                        <td><a href="{{ $file->path }}" target="_blank"><i class="fa-solid fa-file-pen" aria-hidden="true"></i></a></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        @else
            <p>No Uploads have been added for this job. You can add a file by clicking the button below this table.</p>
        @endif
        <br>

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

        <x-jet-button type="submit">
            {{ __('Upload') }}
        </x-jet-button>
    </form>
</div>

The $job->files() function returns an array derived from files in the expected folder. It can be assumed to be an empty array

I have since created the sub-drirectory but no different as suspect it doesn't get this far and is failing creating the temp file. How do i check this? what should the permissions be (they are 777 right now)

*** EDIT *** I was using a url via an apache.conf file. I ran php artisan serve and changed my .env APP_URL to use this and the message has stopped but how can i use the url I have configured with apache to work. My concern is when i put my changes onto a staging site this will stop working as it does on my local environment....

thanks

0 likes
10 replies
Niush's avatar

Only one issue I see is the validation. Everything else seems fine. The validation rule needs file as well, like such:

$this->validate([
    'upload' => 'required|file|max:2048' // use the mimes if you need but, keep file rule
]);

And, in case if it is just images, use this:

$this->validate([
    'upload' => 'required|image|max:2048'
]);
1 like
CraigStanfield's avatar

@Niush Still no good after making suggested amends (they are mixed types for a company file sharing between joibs) however I get the same issue, soon as i select the file and before i submit the file it says 'The upload failed to upload.' at this point clicking submit sends an empty value into the fileUploads function and then fails the validation. I suspect the issue is happening creating the livewire-tmp file and before it is validated. i have this livewire-tmp folder set with 777 permissions so should work right?

Niush's avatar

@CraigStanfield The storeAs function does not seem correct. The 2nd parameter is the file name (not the driver). May be that is causing the issue. Changing might help?

$this->upload->store('uploads/' . $this->job_number, 'public');
// OR This, depending on what you need.
$this->upload->storeAs('uploads', $this->job_number, 'public');
CraigStanfield's avatar

@Niush still the same errors. I've got xdebug running on this now and the validation rule is not hit until the upload button is clicked and at this point file is null as it has not uploaded into the livewire-tmp directory

CraigStanfield's avatar

@folium Intersting but has plenty i don't need (like an eloquent model to store it against) the part about store is not what i need either as a specific directory determined by the job number. The rest is not to far from what i aleady have in that i have a page which calls @livewire and the livewire functionality which should store the file is not much different

CraigStanfield's avatar

Please see my edit to original question. I have switched to using php artisan serve and this has worked but how do i get this to work using apache and a conf file? The conf file works and I am able to access the site using this url.

valentin_vranic's avatar

Have you checked the

post_max_size=
upload_max_filesize=

variables in your php.ini?

Otherwise if you're using livewire3 there's a config/livewire.php where you can set the

'temporary_file_upload' => [
	'rules' => ['file', 'max:51200'],
	'max_upload_size' => 50 * 1024,
]
1 like
laspi94's avatar

You need put in your livewire.php the correct middleware for upload

'temporary_file_upload' => [ 'disk' => null, 'rules' => null, 'directory' => null, 'middleware' => ['web'],
'preview_mimes' => [

with the default config you not have all access to upload file, like Verification csrf or session

1 like
Creator1A's avatar

@laspi94 Thank you SO much for that, you can't even imagine how much of time I spent looking for the reason why my file uploads failed.

Please or to participate in this conversation.