Experience Site: Lightning-file-upload Issue

communityexperience-cloudfileuploadlightninglightning-web-components

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

Best Answer

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.

Related Topic