3

I have created an unauthenticated LWR experience site and added a simple LWC component. The component contains a lightning-file-upload component. If I upload a file using it, the component disappears and in the console, I am seeing the error(attached). Please let me know if I am doing anything wrong.

<template>
  <lightning-card class="slds-text-align_center" style="margin-left: 2cm">
    <h3 slot="title">
      <lightning-icon
        icon-name="utility:connected_apps"
        size="small"
      ></lightning-icon>
      <b>Securely Upload Documents</b>
    </h3>


    <lightning-layout
      class="slds-m-around_medium lgc-bg"
      style="width: 75%"
      multiple-rows="true"
      size="12"
    >
      <lightning-layout-item size="4">
        <div class="slds-box slds-m-around_medium lgc-white ">
          <p class="slds-text-align_left font-default">Account Number:</p>
        </div>
      </lightning-layout-item>
      <lightning-layout-item size="4">
        <div class="slds-box slds-m-around_medium lgc-white slds-text-align_left">
          <h2 class="font-default" style="color: red;">Required Documents</h2>
          <ul class="slds-list_dotted" style="font-size: 14px;">
            <li>Bank Statement
            </li>
        </ul>
        </div>
      </lightning-layout-item>
      <lightning-layout-item size="4">
        <div class="slds-box slds-m-around_medium lgc-white ">
        <p >
          <lightning-file-upload
          label=""
          name="fileUploader"
          accept={acceptedFormats}
          file-field-name="Guest_Record_fileupload__c"
          file-field-value="0016C00000aUrzgQAC"
          onuploadfinished={handleUploadFinished}
          multiple
        >
        </lightning-file-upload>
        </p>
      </div>
        
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>

// controller code
handleUploadFinished(event) {
    // Get the list of uploaded files
    let uploadedFiles = event.detail.files;    
  }

enter image description here enter image description here enter image description here

Improve this question

1 Answer 1

Reset to default
3

As of today (Spring 22), lightning-file-upload is not supported in the Lightning Web Runtime digital experience

https://developer.salesforce.com/docs/atlas.en-us.232.0.exp_cloud_lwr.meta/exp_cloud_lwr/get_started_comp_limitations.htm

To use this component, you must use an Aura-based template, or to stay with the LWR template, you can write your own file upload component.

Improve this answer
3
  • Thanks. I have changed template to Aura based and it works fine now.
    – SFDC_BigDog
    Mar 8, 2022 at 22:54
  • To be clear, we can embed the LWC inside of an Aura component?
    – Matthew Metros
    Jul 17, 2022 at 19:03
  • Matthew- it might be more appropriate to post this as a separate question, but yes, you can embed LWC in Aura. This would not help the original question, though, because LWR templates support neither Aura components nor the file upload component. Switching to an Aura template is the answer, which supports both LWC and file-upload
    – Jeff Kranz
    Jul 17, 2022 at 22:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .