0

I need to display files thumbnail images in my data table in LWC. I have followed this blog, but in my component, I'm getting the URL instead of images.

Below is my code:

thumbNailImage.html:

<template>
    <img src={url} alt={altText} class="image"/>
</template>

thumbNailImage.js:

import { LightningElement, api } from 'lwc';

export default class ThumbNailImage extends LightningElement {
    @api url;
    @api altText;
}

fileManagerDataTable.html:

<template>
    
</template>

fileManagerDataTable.js:

import LightningDatatable from 'lightning/datatable';
import thumbNailImageTable from './thumbNailImageTable';

export default class FileManagerDataTable extends LightningDatatable {
    static customTypes = {
        image: {
            template: thumbNailImageTable
        }
    };
}

thumbNailImageTable.html:

<template>
    <c-thumb-nail-image url={value}
    alt-text="Image Not Found">

    </c-thumb-nail-image>
</template>

fileManager.html:

<template>
    <lightning-card variant="Narrow" title='File Manager' icon-name="standard:document">
        <template if:true={isLoading}>
            <lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>
        </template>
        <div class="row">
            <div>
                <lightning-input type="search" onchange={handleFilesChange} value={searchFiles} variant="label-hidden" placeholder="Search Files..."></lightning-input>
            </div>
        </div>
        <div slot="actions">
            <lightning-button variant="brand" label="Download Selected" title="Download Selected" onclick={downloadSelected} class="slds-m-left_x-small">
            </lightning-button>&nbsp;&nbsp;
            <lightning-button title="Content Sync" icon-name="utility:refresh"
                onclick={handleRefresh} slot="actions">
            </lightning-button>
        </div>
        

        <div class="slds-var-p-around_small">
            <lightning-datatable key-field="id" data={dataList} columns={columnsList}
                onrowaction={handleRowAction}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

fileManager.js:

import { LightningElement, track, api } from 'lwc';

import getFilesList from '@salesforce/apex/FileListController.getFilesList';
import deleteContentDocument from '@salesforce/apex/FileListController.deleteContentDocument';
import { NavigationMixin } from 'lightning/navigation';


const columns = [
    // {label: 'Select', fieldName: 'isSelected', type: 'boolean'},
    { label: 'Profile Pic', fieldName: 'contentUrl', type:'image'},
    { label: 'Title',       fieldName: 'title',
        cellAttributes: { 
            iconName: { fieldName: 'icon' }, iconPosition: 'left' 
        }
    },
    { label: 'Created By',  fieldName: 'createdBy',
        cellAttributes: { 
            iconName: 'standard:user', iconPosition: 'left' 
        }
    },
    { label: 'Created Date',  fieldName: 'createdDate',
        cellAttributes: { 
            iconName: 'standard:icon', iconPosition: 'left' 
        }
    },
    { label: 'File Type',  fieldName: 'filetype',
        cellAttributes: { 
            iconName: 'standard:icon', iconPosition: 'left' 
        }
    },
    
    { label: 'Preview', type:  'button', typeAttributes: { 
            label: 'Preview',  name: 'Preview',  variant: 'brand-outline',
            iconName: 'utility:preview', iconPosition: 'right'
        } 
    },
    { label: 'Download', type:  'button', typeAttributes: { 
            label: 'Download', name: 'Download', variant: 'brand', iconName: 'action:download', 
            iconPosition: 'right' 
        } 
    },
    { label: 'Delete', type:  'button', typeAttributes: { 
            label: 'Delete',   name: 'Delete',   variant: 'destructive',iconName: 'standard:record_delete', 
            iconPosition: 'right' 
        } 
    } 
];
export default class FilesManager extends NavigationMixin(LightningElement) {
    
   @api recordId;

   @track searchFiles='';

   @track dataList;
   @track masterDataList;
    @track columnsList = columns;
    isLoading = false;

    wiredFilesResult;

    connectedCallback() {
        this.handleRefresh();
    }

    handleRowAction(event){

        const actionName = event.detail.action.name;
        const row = JSON.stringify(event.detail.row);
        console.log(row);

        const parsedRow = JSON.parse(row);
        switch (actionName) {
            case 'Preview':
                this.previewFile(parsedRow);
                break;
            case 'Download':
                this.downloadFile(parsedRow);
                break;
            case 'Delete':
                this.handleDeleteFiles(parsedRow);
                break;
            default:
        }

    }

    downloadSelected() {
        const selectedRows = this.template.querySelector('lightning-datatable').getSelectedRows();
        const strinfyResult  = JSON.stringify(selectedRows);
        const parseRows = JSON.parse(strinfyResult);
         
        console.log("getSelectedRows => ", parseRows );

        let contentStr = '';
        parseRows.forEach(row => {
            console.log(row.id)
            if(contentStr == ''){
                contentStr = row.downloadUrl;
            }
            else{
                contentStr = contentStr  + '/'+row.latestVersionId;
            }
            
        });
        console.log(contentStr);
        this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: contentStr
                }
            }, false 
        );
    }

    previewFile(file){
      
            this[NavigationMixin.Navigate]({
                type: 'standard__namedPage',
                attributes: {
                    pageName: 'filePreview'
                    
                    
                },
                state : {
                    selectedRecordId: file.id
                }
            });
        
        
    }

    downloadFile(file){
        this[NavigationMixin.Navigate]({
                type: 'standard__webPage',
                attributes: {
                    url: file.downloadUrl
                }
            }, false 
        );
    }

    handleDeleteFiles(row){

        this.isLoading = true;

        deleteContentDocument({
            recordId : row.id
        })
        .then(result => {
            this.dataList  = this.dataList.filter(item => {
                return item.id !== row.id ;
            });
        })
        .catch(error => {
            console.error('**** error **** \n ',error)
        })
        .finally(()=>{
            this.isLoading = false;
        });
    }

   
    handleRefresh(){

        this.isLoading = true;
        getFilesList({
            recordId : this.recordId
        })
        .then(result => {
            // let finalData = result;
            // finalData.forEach(file => {
            //     file.downloadUrl = file.downloadUrl;
            //     file.fileUrl     = file.contentUrl;
            //     file.CREATED_BY  = file.createdBy;
            //     file.icon = file.iconName;
            //     // file.isSelected = file.isSelected;
                
            // });
            this.dataList = result;
            this.masterDataList = result;
            console.log(this.dataList);
        })
        .catch(error => {
            console.error(error)
        })
        .finally(()=>{
            this.isLoading = false;
        });
    }

    handleFilesChange(event){
        console.log('>>> searchFiles... '+ event.target.value);
        this.searchFiles = event.target.value;
        let regex = new RegExp(this.searchFiles, "i");
        this.dataList = this.masterDataList.filter(row => regex.test(row.title));
    }

}

1 Answer 1

0

I'm a little late to the party, but maybe I can help? Managed to get this working. Did you have thumbNailImageTable.html in the same directory as your fileManager LWC?

You must log in to answer this question.

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