3

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...

enter image description here

3
  • So you don't see any errors in the browser console or in the Salesforce debug log? – David Cheng Oct 21 '19 at 0:52
  • I see two warnings when I try to upload a file. 'Component.Index(): Invalid redundant use of component.index()'. And then there is a deprecated icon warning '<forceChatter:fileIcon> is deprecated'. – Colin Oct 21 '19 at 16:27
  • These warnings are not related. Did you try to add debugger; in the handleUploadFinished method? Just to know it does enter there. – Yevhen Kharchuk Dec 20 '19 at 14:41
3

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.