1

I am using lightning:fileupload in my lightning page. It works fine, but I am unable to override the default error message displayed (your company does not allow the file format...etc). Business wants a custom message to be displayed, not this default one. I tried to use toast message, but that is in addition to the default message.

Any one has any ideas on how to override the default message?

Thanks in advance. Vardi.

  • File upload has method called handleUploadFinished (). Can you check if by writing toast/error messages in it overrides original message?? – Mohit Kulkarni Feb 1 at 15:18
  • I am firing a showtoast event with a custom message. But that is getting displayed on the screen separately where as the default message is displayed just below the button. I want to override this default message with my own. – vardi Feb 1 at 18:38
  • @vardi, Were you able to find solution for this. I have the same problem. – devforce Jul 6 at 10:55
0

Not sure you can override the standard message "your company does not allow the file format..".

This message is displayed if the file type uploaded is not within the list accept attribute. I believe you have such an accept attribute similar to this in your component markup:

<aura:attribute name="accept" type="List" default="['.jpg', '.jpeg']"/>

If the list of file types triggered by the standard message is known, then a possible workaround is to include these in the list of accept attribute so that the standard message does not get fired.

But then add custom logic in handleUploadFinished to validate the file type in your component JS to invoke your custom toast with custom message.

| improve this answer | |
  • I do have accepted list of files coded in the lightning:fileupload. If the uploaded file is one of the formats listed, there is no problem. If an unsupported one is loaded, that is when the default error message is thrown. I want to override the default with my own. We do not want the default error message. Is there a way to suppress the default error message atleast? – vardi Feb 2 at 0:02
  • @vardi as explained in the answer, try to add the unsupported file extension to the list of accepted attribute, this will prevent the standard message to display – Shamina Feb 2 at 4:48
  • Shamina - That will negate the whole purpose; I want to accept, let's say, PDF & Tiff only formats. want to prevent uploading any other types and if some one tries a different format, I want to display the custom message. If add unsupported file ext to the list of accepted files, then unsupported file will also get accepted and saved to the record which is undesired. Here the need is to display a custom message in the place of standard message. – vardi Feb 2 at 17:24
  • @vardi its indeed not an ideal solution but like I said it seems that the std error message cannot be overridden. that's why I suggested the workaround to allow the file types only in the accept attribute but implement a custom logic in onuploadfinished to verify the file type and issue a custom message. I understand that in doing so the file will already be uploaded. Note that this also means that you will need some apex code also to delete the file if it is from wrong file type but at least you can issue a custom message on the component. – Shamina Feb 3 at 10:18
  • I understand what you are suggesting, but the problem is not only cleaning up the undesired files uploaded, but also the default file upload status bar that shows the progress of file upload would be misleading to users. It shows file is uploaded successfully, but again the custom message (after checking the file type) says that is an invalid file. I am looking for an elegant solution using accept parameter to throw the custom message when unaccepted format is uploaded. As you said, looks like there is no way to override he default message. Thanks for your prompt responses. – vardi Feb 4 at 15:06
0

I've built a workaround solution for this issue. First I want to make it clear, after API version 38, the document query won't work for the elements like lighting-input due to the locker service. But if the metadata version was downgrade to 38 below, we can still use MutationObserver class and document query to listen to the dom change and customize the error message content.

For me, this is not an option, because some of the lighting components I'm using in the main compoment are not supported by the earlier metadata version. So I had to move on to build the following solution.

  1. create a wrapper div outside the lightning:fileUpload element, 2 variables and 1 method
    <aura:attribute name="offsetHeight" type="Integer" />
    <aura:attribute name="showFileUpload" type="Boolean" default="true" />
    <aura:handler name="change" value="{!v.offsetHeight}" action="{!c.offsetHeightChange}" />

    <aura:if isTrue="{!v.showFileUpload}">
      <div id='wrap'>
         <lightning:fileUpload />
      </div>
    </aura:if>
  1. use window.setInterval to monitor the wrap div height
 window.setInterval(function () {
    let fileUploadDiv = document.querySelector('#wrap');
    let offsetHeight = fileUploadDiv.offsetHeight;
    if (offsetHeight > 0) {
      component.set("v.offsetHeight", offsetHeight);
    }                   
  }, 100);
  1. If the error message shows, it will change the wrap div height, so the offsetHeightChange method will be called, then we can refresh the lightning:fileUpload component by using aura:if, and call custom message method
  component.set("v.showFileUpload", false);
  component.set("v.showFileUpload", true);
  helper.showToast('error', 'Error', 'Error message');

It's working fine for me, but it adds additional tasks on the front end and it's not a memory-efficient solution. For the long term, I think Salesforce will improve lightning:fileUpload component by allowing users to customize error messages.

| improve this answer | |

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.