Livewire File Upload saying file is Null

@bvfi-dev

upload_max_filesize=800M
post_max_size=0

[2024-06-14 12:53:57] local.INFO: File has been updated: {"sanmar_file":{"Livewire\Features\SupportFileUploads\TemporaryUploadedFile":"C:\Users\devyn\AppData\Local\Temp\phpE8E4.tmp"}} 

It took about 2ish minutes for that output to finally show up in the log. Hmm I think its trying to store the file before it is fully put in the temp folder...

The file Im trying to upload is 151 MB (159,139,917 bytes).

@DevynKo Yea, I had a feeling it might be that. Honestly, Im a beginner as well and I don't want to mislead you with possibly bad suggestions, but I'll try to be as clear and practical as possible. Remember, this is how I would do it. I can't give you much code because this is not a simple task and you will need to handle a bunch of bugs as you develop it. I hope I can nudge you in the right direction with my sort of 'pseudo-code'

I would declare a public $isFileUploading = false in the Component that would disable all the actions that the user shouldn't be able to do while the file is uploading. Things like submitting the form, post-file-upload processing actions and stuff like that. So, when the user starts uploading a file you disable some buttons and actions.

Serverside Way

You could try and see if this would work, I dont know. This should be called before a property is being updated. Make sure you set it false in the updatedSandmarFile()

public function updatingSanmarFile()
{
    $this->isUploading = true;
}

• Then you could use AlpineJS and depending on whether you have Livewire 2 or 3, you use entangle or $wire.entangle to bind AlpineJS with Livewire. So, you can bind it like (For Livewire v2):

<div x-data="{ isUploading: @entangle('isUploading') }" x-show="isUploading" class="mt-3 text-blue-500">
        Uploading...
    </div>

• And then you just put whatever you want to be happenin in the updatedSanmarFile():

public function updatedSanmarFile()
{
    $this->isUploading = false;
    if(!is_null($this->sanmar_file)) {
        // Do validation logic here. If validation passes, do more logic, etc...
    }
}

I would first add a test button and check if updatingSanmarFile behaves the way you want. If it does, it's only a matter of using AlpineJS to bind it with the LivewireProperty and then handle the backend depending on the state of the property. You could also use:

finally {
    $this->isUploading = false;
}

as part of the try->catch->finally to set the uploading to false. The try/catch block should have ONLY 1 job in it, storing the file, nothing more.

• Remember to split all your methods. Have a method do ONE JOB and one job only. A separate method for validating the file, saving the file in the DB, storing the file locally, try to split everything up, because this way you will future proof your Component for events, so that they can be sync or async and you would have much more control over them.
• Remember that file uploads in Livewire are handled differently on the frontend side and the server side. On the server side it's difficult to interact with the frontend. When the a file is uploading, the server waits for it to upload and then it can try to handle it. While on the frontend, you can handle it using JS.
• Use more checks, for example, you should do a check if $path = $this->sanmar_file->store('uploads', 'local'); is set before assigning it to $fullPath and similar. This way you would always know when an error is thrown and where the code fails and you could also enhance the user experience with this by throwing errors for them.

For a froentend way of handling the uploaded files, you need to dive deeper into AlpineJS or handle it with a JS script

@bvfi-dev Thank you for suggestions, I really appreciate you taking your time. The problem is the updatingSanmarFile(). It doesnt get fired until the file gets moved to the tmp folder. So im struggling figuring out how to give the user feedback that that file is uploading. It takes a minute or two after selecting a file, currently I just have a .live on input and once the updatedSanmarFile() fires then I store the file and do my logic.

@DevynKo Like I said, you can use AlpineJS:

Remember that file uploads in Livewire are handled differently on the frontend side and the server side. On the server side it's difficult to interact with the frontend. When the a file is uploading, the server waits for it to upload and then it can try to handle it. While on the frontend, you can handle it using JS.

Since updatingSanmarFile() isn't working the way I would expect it to, I would say you do it through the frontend. Just use entangle (Untested code):

<div x-data="{ isUploading: @entangle('isUploading') }">
    <input type="file" wire:model="sanmar_file" name="sanmar_file" @change="isUploading = true" class...
    ....
    <div x-show="isUploading" class="mt-3 text-blue-500">
            Uploading...
        </div>

This should control the $isUploading and it would show the Uploading... only when isUploading is true Then in the Livewire component you initialize the value public $isUploading = false; and then set it false in the updatedSanmarFile()

Alternative way

• I would write JS code x-on:change="handleFileUpload" (On the input element and then bind the variables there:

<script>
function handleImageChange(event) {
    const input = event.target;
    const file = input.files[0];
    const type = file.type;
    const size = file.size;
    //After performing file checks:
    this.$wire.set('isUploading', true);
    this.$wire.call('customComponentMethod'); //You can use this If you want to call a custom method as soon as the user chooses to upload
    ...

Here, you can write more special cases, you can immediately check If the file type is correct, and If not, prevent the upload. You could prevent users from uploading files that are above the limit and not even let it go into the tmp folder. Since you can upload large files, this is I think important. The problem is, the validation in Livewire comes AFTER the file was uploaded, maybe there is a Livewire way of handling it as soon as the file is being started to be uploaded, but I haven't discovered it yet.

Sorry, I can't help you out more with code, but I think I've given you enough resources to do this on your own. Use dd(); for quick debugging, or you can try Debugbar If you want child components to print out debug messages, otherwise they won't get caught/printed. I could write a whole File Upload component for you, but then you won't have learned anything, and in the future you would have no idea how to update it. I actually have to do the same thing for my upload component, so Im working in parallel with this issue :D

@bvfi-dev Your first suggestion worked! I appreciate the help.