Livewire upload file random behavior

I tried to make an upload functionality in my app (Laravel 10.14.1 with Livewire). On my local machine everything is working without any problems. When I deployed app into the server when I upload a file sometimes it's working sometimes I get an error. This is code from my controller:

` public function uploadFile($id) {

    $order = Orders::findOrFail($id);
    $user = auth()->user();

    $this->orderId = $order->id;
    $this->name = $order->name;
    $this->description = $order->description;
    $this->date = $order->date;
    $this->project_id = $order->project_id;
    $this->amount = $order->amount;
    $this->accepted = $order->accepted;
    $this->created_by = $order->created_by;

    $original_name = $this->file_name->getClientOriginalName();
    $new_file_name = time() . '-' . $original_name;
    
    $this->file_name->storeAs('uploads', $new_file_name, 'orders');

    Files::create([
            'file_name' => $new_file_name,
            'created_by' => auth()->user()->id,
            'project_id' => $order->project_id,
            'order_id' => $order->id
        ]);
    
    session()->flash('success', 'Pomyślnie dodano plik.');
    return redirect()->to('/orders');
}`

I get an error:

Call to a member function getClientOriginalName() on null

In this case the bad line is:

$original_name = $this->file_name->getClientOriginalName();

But when I close this error and click the "Upload file" button second time - the file will upload. Sometimes the second click get me an error, and the third time uploads the file correctly. I don't understand this random behavior.

The code from view file:

<div class="grid md:grid-cols-12 gap-4 mb-16"> <div class="md:col-span-6"> <em class="font-italic"><p class="mb-4">Add a file</p></em> <input id="file_name" type="file" wire:model="file_name"> <x-button-warning type="submit" wire:click="uploadFile({{$object->id}})" class="btn btn-primary btn-sm">Attach a file</x-button-warning> <x-input-error class="mt-2" :messages="$errors->get('file_name')" /> </div> <div class="md:col-span6"> </div> </div>

LaryAI

2 years ago

Level 58

The error message "Call to a member function getClientOriginalName() on null" suggests that $this->file_name is null at the time when getClientOriginalName() is called. This could be due to the file not being properly uploaded or not being recognized by Livewire.

In Livewire, when you bind a file input with wire:model, it doesn't immediately set the property with the instance of the uploaded file. Instead, it sets the property with an instance of Livewire\TemporaryUploadedFile, which only gets resolved to an instance of Illuminate\Http\UploadedFile when you interact with it.

To ensure that the file is properly uploaded and recognized by Livewire, you can add a validation rule in your uploadFile method to check if the file is present before trying to interact with it. Here's how you can do it:

public function uploadFile($id) {
    $this->validate([
        'file_name' => 'required|file', // add this line
    ]);

    // ... rest of your code
}

This will ensure that the file_name property is not null and is an instance of UploadedFile before you try to call getClientOriginalName() on it.

If the error persists, it might be due to a file size limit or a timeout issue on your server. Check your PHP and server configuration to ensure that they can handle the size of the files you're trying to upload.

Please or to participate in this conversation.