I need to show a custom error message in lightning-file-upload when we tried to upload the unacceptable format of the file.

            label="Attach receipt"

it does not have any property to set custom error messages?

What I tried so far?

I have tried accessing the component in the renderedCallback method. But No success.


I cannot use toast to show error in lightning-file-upload because it does not have any such method like onerror.

  • Is it still calling the handleUploadFinished method when the file format is incorrect? If so, you should just handle the error there and delete the file if it actually saved to Salesforce. If not, I can't help you there. Still just beginning my LWC training (I'm pretty much working with just aura components at the moment).
    – Roti
    Oct 18 '19 at 20:39
  • @sanket Were you able to get solution for this? I have the same problem
    – devforce
    Jul 6 '20 at 10:51

In the docs it says you can use your custom validity error messages using HTML 5's api.

    <lightning-input class="inputCmp"
                     label="Enter your name:">
    <lightning-button label="Register"
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {

    register(event) {
        var inputCmp = this.template.querySelector(".inputCmp");
        var value = inputCmp.value;
        // is input valid text?
        if (value === "John Doe") {
            inputCmp.setCustomValidity("John Doe is already registered");
        } else {
            inputCmp.setCustomValidity(""); // if there was a custom error before, reset it
        inputCmp.reportValidity(); // Tells lightning-input to show the error right away without needing interaction
  • 1
    This will not work with lightning-file-upload.
    – devforce
    May 18 '20 at 9:21

To override the in built message of lightning-file-upload, we need to handle the inbuilt ondrop event on lightning-file-upload. Then in the handler custom message can be shown.

<lightning-file-upload name="fileUploader" accept={acceptedFormats}

In the JS:

handleDrag(event) {
    if (event.dataTransfer.items) {
        for (let i = 0; i < event.dataTransfer.items.length; i++){
            const item = event.dataTransfer.items[i];
            if (item.type && !item.type.includes('image') && !item.type.includes('pdf')) {
                const file = item.getAsFile();
                let nameSplit = file.name.split(".");
                //let fileType = item.type.split("/");
                this.showToast('Error', `Sorry, the following file types are not supported: ${nameSplit[(nameSplit.length-1)]}`, 'error');

I am only allowing image and pdf types docs. You can change the allowed format there.

To hide the inbuilt message, the css has to be overriden. This is a bit tricky as LWC won't allow to override inbuilt css classes. Instead use static resource to load a css file and override the css.


import { loadStyle } from 'lightning/platformResourceLoader';
import customStyle from '@salesforce/resourceUrl/customStyle';

Inside JS class:

renderedCallback() {
            loadStyle(this, customStyle)

Finally CSS: Make sure to add a custom class : fileClass to make sure this overrides only your component.

.fileClass .slds-form-element__help{
  display: none;
  visibility: hidden;

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.