LWC lightning-file-upload Component Not Uploading Files

Question

I've got a strange issue that I can't pin down.

I have the below component added to a record detail page (Contact) and when I try to drag-and-drop or upload files directly from my file system, the progress bar turns blue but never finishes upload. I've tried this with multiple file types and on multiple records.

It looks like the upload fails silently and I can't figure out why I am not getting the green checkmark that indicates files have been successfully uploaded.

Any ideas?

HTML

<template>
    <lightning-card title='File Uploader' icon-name='custom:custom19'>
      <lightning-file-upload
        label="Attach File"
        name="fileUploader"
        accept={acceptedFormats}
        record-id={recordId}
        onuploadfinished={handleUploadFinished}
        multiple>
      </lightning-file-upload>
    </lightning-card>
</template>

JavaScript

import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class FileUpload extends LightningElement {
  @api recordId;

  get acceptedFormats() {
    return ['.pdf', '.png', '.jpg', '.jpeg'];
  }

  handleUploadFinished(event, recordId) {
    let strFileNames = '';
    const uploadedFiles = event.detail.files;

    for (let i = 0; i < uploadedFiles.length; i++) {
      strFileNames += uploadedFiles[i].name + ', ';
    }

    this.dispatchEvent(
      new ShowToastEvent({
        title: 'Success!!',
        message: strFileNames + ' Files uploaded successfully!',
        variant: 'success',
      }),
    );
  }
}

The result...

Answer 1

I worked with Salesforce support on this issue and they were just as stumped as I was. It turns out that the issue was caused by the Salesforce Community Page Optimizer extension in Chrome. I don't know exactly why but this plugin caused the whole LWC File Upload component to stop working. Disabling the plugin immediately fixed the issue!