LWC File Upload component ignores accept setting for drag-and-drop

Question

There is a strange behaviour in LWC File Upload component.

There are two ways how files can be uploaded through this component.

The user can:

• Select a file on your system by clicking the button to open the system's file browser
• Drag a file from your system into the file selector dropzone

If the user uses the first way, the accept format filter works well, only accepted file formats are allowed.

If the user uses the second way, however, the accept format doesn't have effect, and user can still upload a file which doesn't conform to the accepted file formats.

So, if we set file format to .pdf and .xlsx, the user cannot select .xls file in the file browser but can upload .xls file by using drag and drop feature.

Is there a simple UI workaround for this? Is this a platform bug? How this can be resolved?

Answer 1

Though i have not confirmed its a bug in my instance of the Salesforce developer org, A workaround i have used for this is:-

You can write a validation rule on ContentVersion Object to restrict the file type not respected by file upload component.

1. To avoid this validation rule firing at other places in Salesforce instead of custom Lightning component, you can have a custom field on Content version object and update it from file upload component. Refer this custom field in validation rule for bypass mechanism.
2. the org admin can create a custom field on the ContentVersion object. The field type can be text or picklist. The API name of the custom field must end with fileupload__c.
3. Specify the file-field-name and file-field-value attributes in lightning-file-upload to store a value in the custom field in the ContentVersion object.

e.g

<lightning-file-upload
            label="Attach receipt"
            name="fileUploader"
            accept={acceptedFormats}
            record-id={myRecordId}
            file-field-name="Run_Validation_fileupload__c"
            file-field-value={runValidation}
            onuploadfinished={handleUploadFinished}
            multiple>
    </lightning-file-upload>

Here Run_Validation_fileupload__c is custom field on Content Version Object and runValidation is a property defined in js file and holds the value of the field to be stored.

Answer 2

Decided to process the uploadFinished custom event.

Upload.html file listing

<template>
    <lightning-file-upload
        label={label}
        accept={acceptedFormats}
        onuploadfinished={handleUploadFinished}>
    </lightning-file-upload>
    <template if:true={fileError}>
        <div class="slds-has-error">
            <div role="alert" class="slds-form-element__help">{fileError}</div>
        </div>
    </template>
</template>

Upload.js file listing

import { LightningElement, api } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';

export default class Upload extends LightningElement {
    @api label = '';
    fileError = '';

    get acceptedFormats() {
        return ['.pdf', '.xlsx'];
    }

    handleUploadFinished(event) {
        let fileNameParts = event.detail.files[0].name.split('.');
        let extension = '.' + fileNameParts[fileNameParts.length - 1].toLowerCase();
        if (!this.acceptedFormats.includes(extension)) {
            this.fileError = 'This extension ' + extension + ' is not listed as accepted format';
            deleteRecord(event.detail.files[0].documentId);
        } else {
            this.dispatchEvent(new CustomEvent('upload', {detail: {file: event.detail.files[0]}}));
            this.fileError = '';
        }
 
    }
}

This solution won't require additional field creation.