NavigationMixin - file preview - Failed to Load inside slds-file_card div

Question

Is there any workaround to display a file preview under slds-file_card div, when I click the image

HTML:

<template>
<div class="slds-p-around_none slds-var-m-top_x-small slds-var-m-bottom_medium slds-m-horizontal_none">
    <lightning-layout-item padding="around-small">
        <div class="slds-visual-picker slds-visual-picker_small">
            <input type="checkbox" id="test" name="Logo"/>
            <label for="test">
        <span class="slds-visual-picker__icon slds-align_absolute-center" style="width:10rem"  onclick={handleClick}>
            <span>
                <div class="slds-file slds-file_card slds-has-title"  style="width:10rem;"  onclick={handleClick}>
                <figure>
                    <a href="#" class="slds-file__crop slds-file__crop_4-by-3 slds-m-top_x-small" onclick={handleClick}>
                        <lightning-icon style="height: 150px !important;" size="large" icon-name="utility:image"></lightning-icon>
                    </a>
                    <figcaption class="slds-file__title slds-file__title_card slds-file-has-actions">
                        <div class="slds-media slds-media_small slds-media_center" >
                            <div class="slds-media__figure slds-line-height_reset">
                                <span class="slds-icon_container" title="pdf">
                                    <lightning-icon icon-name="utility:image" title="Image" size="xx-small"></lightning-icon>
                                    <span class="slds-assistive-text">Test Title</span>
                                </span>
                            </div>
                            <div class="slds-media__body">
                                <span class="slds-file__text">Test Title</span>
                            </div>
                        </div>
                    </figcaption>
                </figure>
            </div>
        </span>
    </span>
    </label>
        </div>
    </lightning-layout-item>
</div>

Test Title Test Title

Js:

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class TestNaviMix extends NavigationMixin(LightningElement) {

    handleClick(event) {
        alert('Inside');
        this[NavigationMixin.Navigate]({
          type: 'standard__namedPage',
          attributes: {
              pageName: 'filePreview'
          },
          state : {
              recordIds: '069H30000001D39IAE' //Dummy ContentDocumentId
          }
        });
    }
}

From the above code, when I click on the inner image its fails to display the content preview.

Note: if I change the onclick to outer div it's working also I can see the preview, the problem is inside slds-file_card its not working.

Answer 1

You need to use selectedRecordId instead of recordIds.

e.g.

handle

Click(event) {
    alert('Inside');
    this[NavigationMixin.Navigate]({
      type: 'standard__namedPage',
      attributes: {
          pageName: 'filePreview'
      },
      state : {
          selectedRecordId: '069H30000001D39IAE' //Dummy ContentDocumentId
      }
    });
}

See also: https://developer.salesforce.com/docs/platform/lwc/guide/use-open-files.html