4

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

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

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.

Update:-

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

2
  • 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, 2019 at 20:39
  • @sanket Were you able to get solution for this? I have the same problem
    – devforce
    Jul 6, 2020 at 10:51

3 Answers 3

0

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

<template>
    <lightning-input class="inputCmp"
                     label="Enter your name:">
    </lightning-input>
    <lightning-button label="Register"
                      onclick={register}>
    </lightning-button>
 </template>
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
  • 1
    This will not work with lightning-file-upload.
    – devforce
    May 18, 2020 at 9:21
0

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}
                onuploadfinished={handleUploadFinished}
                ondrop={handleDrag}
                class="fileClass">
            </lightning-file-upload>

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.

JS:

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

Inside JS class:

renderedCallback() {
        Promise.all([
            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;
}
1
  • I'm able to add event listener for drop event but that doesn't catch when people click the Upload button. I tried listening to "change" event but it won't bubble up.... any ideas on what event I can listen to?
    – Sang Park
    Feb 10 at 16:59
0

Is there any work around to throw custom error message in lightning file upload? I have a requirement to change error message when file is not permitted type and we are trying to upload on community after case is created. Any lead will be appreciated.

Thanks

2
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review
    – identigral
    Apr 20 at 2:36
  • Welcome to Salesforce Stack Exchange (SFSE)! Rather than asking a question in an answer space, please ask a new question. In your new question you can link to this question for reference if you like. (Please note that this "answer" will most likely be deleted. See information in Why and how are some answers deleted?)
    – Moonpie
    Apr 20 at 2:55

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.