"tap to cancel" not working in `FileUpload` form field

[c-zehnter]

Package

filament/filament

Package Version

v3.3.4

Laravel Version

v11.44.1

Livewire Version

No response

PHP Version

PHP 8.2

Problem description

Hi, I'm using the FileUpload form field to upload larger files and I noticed that the "tap to cancel" field on the uploader is not working at all. This is also true for the SpatieMediaFileUpload field. I have checked the filepond demos where it works as expected, so it does not seem to be a filepond bug. I'm not sure if this is CSS, JS or even browser related. I've tested Chrome, Firefox and Edge and it's not working in any browser for me.

Expected behavior

Successfully cancel the file upload while uploading.

Steps to reproduce

• navigate to the CreateOrder form
• (optional) throttle network speed (for more time)
• upload a large-ish file in the FileUpload field
• try to cancel the upload while uploading

Reproduction repository (issue will be closed if this is not valid)

https://github.com/c-zehnter/fileupload

Relevant log output

[EngMustafaSabahWAW]

Yes also i need this solution

[c-zehnter]

Yes also i need this solution

I created a workaround by cancelling the upload using a separate JS script on the form page like this:

<script>
      document.addEventListener('DOMContentLoaded', (event) => {
        const observer = new MutationObserver((mutations, obs) => {
          const pond = document.querySelector('.filepond--root');
          if (pond) {
            document.addEventListener('click', (e) => {
              if (e.target.matches('.filepond--action-abort-item-processing, .filepond--action-abort-item-processing *')) {
                const fileItem = e.target.closest('.filepond--item');
                if (fileItem) {
                  const pondInstance = FilePond.find(pond);
                  if (pondInstance) {
                    const allFiles = pondInstance.getFiles();
                    allFiles.find(f => {
                      pondInstance.removeFile(f.id);
                      // Dispatch event to the form element specifically
                      const form = pond.closest('form');
                      if (form) {
                        form.dispatchEvent(new CustomEvent('form-processing-finished'));
                      }
                    });
                  }
                }
              }
            }, true);
            obs.disconnect();
          }
        });

        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
      });
</script>

Please note that this is just a workaround and not a fix. I wasn't able to figure out why the action is not getting triggered in filament.

[EngMustafaSabahWAW]

Okay how to implement this function or where you paste it

Yes also i need this solution

I created a workaround by cancelling the upload using a separate JS script on the form page like this:

<script>
      document.addEventListener('DOMContentLoaded', (event) => {
        const observer = new MutationObserver((mutations, obs) => {
          const pond = document.querySelector('.filepond--root');
          if (pond) {
            document.addEventListener('click', (e) => {
              if (e.target.matches('.filepond--action-abort-item-processing, .filepond--action-abort-item-processing *')) {
                const fileItem = e.target.closest('.filepond--item');
                if (fileItem) {
                  const pondInstance = FilePond.find(pond);
                  if (pondInstance) {
                    const allFiles = pondInstance.getFiles();
                    allFiles.find(f => {
                      pondInstance.removeFile(f.id);
                      // Dispatch event to the form element specifically
                      const form = pond.closest('form');
                      if (form) {
                        form.dispatchEvent(new CustomEvent('form-processing-finished'));
                      }
                    });
                  }
                }
              }
            }, true);
            obs.disconnect();
          }
        });

        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
      });
</script>

Please note that this is just a workaround and not a fix. I wasn't able to figure out why the action is not getting triggered in filament.