Filament•4w ago

Remove FileUpload delay/debounce

I am using the Forms\Components\FileUpload component in a form. Hovever, even when the file is 1kb, the upload process takes about 2 seconds. In this time, the browser shows no outgoing request. When this happens, the upload itself takes 28ms. Why is the UI waiting so long to perform the request? ->debounce(0) helped to reduce it by 1 seconds, but it seems this wasn't it all. I want a fast and snappy as possible expericence.

17 Replies

toeknee•4w ago

There are lots of reasons, how big is the form? You are using Livewire with filament forms so it can be slow if the form is big as the whole form goes with the request. Also, if in test and you have debug bar that adds weight too.

btxOP•4w ago

FileUpload::make('attachment')
    ->debounce(0)
    ->preserveFilenames()
    ->disk('do')
    ->visibility('public')
    ->multiple()
    ->moveFiles()
    ->maxSize(5 * 1024 * 1024) // 5 GB
    ->acceptedFileTypes(['image/*']),

FileUpload::make('attachment')
    ->debounce(0)
    ->preserveFilenames()
    ->disk('do')
    ->visibility('public')
    ->multiple()
    ->moveFiles()
    ->maxSize(5 * 1024 * 1024) // 5 GB
    ->acceptedFileTypes(['image/*']),

this is the form field. When I drop a file, it takes 3 sencods for the outgoing file upload request to start this is all before submitting the form, it is for uploading the file to livewire_tmp

toeknee•4w ago

that sthe form firled, how many other fields are there in the form? You are also using disk do, which I assume is digital ocean, there network requests to DO coud be slow too.

btxOP•4w ago

the livewire_tmp directory is on localhost. The file will be moved to DO just after submit. The behaviour is with any size of the form. I try to make a video later

toeknee•4w ago

I would add telescope and monitor the request to find what is taking so long

btxOP•4w ago

@toeknee the request is not happening, the request (when it happens) takes 23ms

btxOP•4w ago

After dropping the file, there is "Uploading..." for 2 seconds, without any request happening. The request starts, when percentage is shown. Also it is absolutely ridiculous, that it shows a percentage for a 1KB file, which will be transfered almost instantly

toeknee•4w ago

Yeah something not right there, it’s instant here unload over 30 files very quickly.

btxOP•4w ago

i get the same behaviour even on the filepond website on the demo. So I assume its a setting thing https://pqina.nl/filepond/ also in this gif from github

btxOP•4w ago

awcodes•4w ago

To be honest this looks like an issue with filepond and it’s js and not filament. Does the same thing happen in other browsers.?

btxOP•4w ago

Yes, it happens in all browsers. I also think this is related to the library, thus I opened an issue there. Thanks @awcodes According to the filepond maintainer, there is a config flag allowMinimumUploadDuration which can be set to false. Is there any option to pass config parameters for the UploadField that are not mapped to PHP? Couldn't find it in the docs https://github.com/pqina/filepond/issues/1030

awcodes•4w ago

Doesn’t appear to be on the component so it would be whatever filepond’s default is. Still doesn’t explain why it’s happening for you and not others.

btxOP•4w ago

sorry, can't follow. Its happening for anyone. "FilePond simulates uploads of small files so it "feels" like something actually happened. But for large amounts of files this isn't ideal."

awcodes•4w ago

I’m not seeing any issues and toeknee said he wasn’t either. But either way that setting is not passed to the upload component in filament so it would either need to be PRd and accepted or you’ll need to do a custom FileUpload view that allows it to be passed into the config.

toeknee•3w ago

Im going to presume it is something to do with his computer, or browser.

btxOP•3w ago

Nope, why can't you see the "Uploading" circle in the gif that I shared ? This circle is a fake delay. When he clicks the upload icon, the 2 second long circle, where it shows "Uploading" has no function, just forces the user to wait. The upload starts, when you can see the percent progess of the upload.

Gaming

Programming

Remove FileUpload delay/debounce

Did you find this page helpful?