Add delete multiple files and file preview

Added ability to delete multiple files. Extended datatable to
show file previews when hovering on a link on both files and
version tables

force-app/main/default/classes/GetFilesController.cls

@@ -28,7 +28,8 @@ public with sharing class GetFilesController {
           link.ContentDocumentId,
           link.ContentDocument.LatestPublishedVersion.Title,
           link.ContentDocument.LatestPublishedVersion.CreatedBy.Name,
-          Date.valueOf(link.ContentDocument.LatestPublishedVersion.CreatedDate)
+          Date.valueOf(link.ContentDocument.LatestPublishedVersion.CreatedDate),
+          link.ContentDocument.LatestPublishedVersionId
         )
       );
     }
@@ -60,6 +61,8 @@ public with sharing class GetFilesController {
     @AuraEnabled
     public Date createdDate { get; set; }
     @AuraEnabled
+    public String latestVersionId { get; set; }
+    @AuraEnabled
     public String url {
       get {
         return '/' + this.id;
@@ -75,11 +78,12 @@ public with sharing class GetFilesController {
       this.id = '';
     } /*}}}*/
 
-    public FilesWrapper(String id, String title, String createdBy, Date createdDate) {
+    public FilesWrapper(String id, String title, String createdBy, Date createdDate, String latestVersionId) {
       this.id = id;
       this.title = title;
       this.createdBy = createdBy;
       this.createdDate = createdDate;
+      this.latestVersionId = latestVersionId;
     }
   } /*}}}*/
 

force-app/main/default/lwc/customDatatable/customDatatable.html

@@ -0,0 +1 @@
+<template> </template>

force-app/main/default/lwc/customDatatable/customDatatable.js

@@ -0,0 +1,11 @@
+import LightningDataTable from "lightning/datatable";
+import linkPreview from "./linkPreview.html";
+
+export default class CustomDatatable extends LightningDataTable {
+  static customTypes = {
+    filePreview: {
+      template: linkPreview,
+      typeAttributes: ["anchorText", "versionId"]
+    }
+  };
+}

force-app/main/default/lwc/customDatatable/customDatatable.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>48.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/main/default/lwc/customDatatable/linkPreview.html

@@ -0,0 +1,4 @@
+<template>
+  <c-file-preview-col data-navigation="enable" file-id={value} label={typeAttributes.anchorText} version-id={typeAttributes.versionId}></c-file-preview-col>
+  <!--<a href={value} data-link={typeAttributes.anchorText}>{typeAttributes.anchorText}</a> -->
+</template>

force-app/main/default/lwc/filePreviewCol/filePreviewCol.css

@@ -0,0 +1,6 @@
+.overlay {
+  position: fixed;
+  z-index: 101;
+  left: 30px;
+  height: 5rem;
+}

force-app/main/default/lwc/filePreviewCol/filePreviewCol.html

@@ -0,0 +1,8 @@
+<template>
+  <a href={url} onmouseover={handleMouseOver} onmouseout={handleMouseOut}>{label}</a>
+  <template if:true={showPreview}>
+    <div class="overlay">
+      <c-file-preview-comp file-id={fileOrVersionId} height-in-rem="1.25"></c-file-preview-comp>
+    </div>
+  </template>
+</template>

force-app/main/default/lwc/filePreviewCol/filePreviewCol.js

@@ -0,0 +1,26 @@
+import { LightningElement, api } from "lwc";
+import { baseNavigation } from "lightning/datatableKeyboardMixins";
+import template from "./filePreviewCol.html";
+
+export default class FilePreviewCol extends LightningElement {
+  showPreview = false;
+  @api fileId = "";
+  @api label = "";
+  @api versionId = "";
+
+  get url() {
+    return this.fileId ? "/" + this.fileId : "#";
+  }
+
+  get fileOrVersionId() {
+    return this.versionId || this.fileId;
+  }
+
+  handleMouseOver() {
+    this.showPreview = true;
+  }
+
+  handleMouseOut() {
+    this.showPreview = false;
+  }
+}

force-app/main/default/lwc/filePreviewCol/filePreviewCol.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>48.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/main/default/lwc/filePreviewComp/filePreviewComp.html

@@ -0,0 +1,8 @@
+<template>
+  <template if:true={url}>
+    <img src={url} onerror={fallback}></img>
+  </template>
+  <template if:false={url}>
+    <lightning-card>No PDF File ID found. Please specify PDF File ID.</lightning-card>
+  </template>
+</template>

force-app/main/default/lwc/filePreviewComp/filePreviewComp.js

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import NOPREVIEWIMGURL from "@salesforce/resourceUrl/nopreviewimg";
+
+export default class FilePreviewComp extends LightningElement {
+  @api fileId;
+  @api heightInRem;
+
+  get baseUrl() {
+    return `https://${
+      window.location.hostname.split(".")[0]
+    }--c.documentforce.com`;
+  }
+
+  get url() {
+    return `${this.baseUrl}/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=${this.fileId}&operationContext=CHATTER&page=0`;
+  }
+
+  fallback(event) {
+    if (event.target.src != NOPREVIEWIMGURL) {
+      event.target.src = NOPREVIEWIMGURL;
+      this.template.querySelector("img").style.width = "200px";
+      this.template.querySelector("img").style.height = "100px";
+    }
+  }
+}

force-app/main/default/lwc/filePreviewComp/filePreviewComp.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>48.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/main/default/lwc/filesRelatedList/filesRelatedList.html

@@ -1,6 +1,7 @@
 <template>
   <lightning-button label="New File" onclick={newFileUpload}></lightning-button>
-  <lightning-datatable columns={columns} key-field="id" data={files} onrowaction={handleRowAction}></lightning-datatable>
+  <lightning-button label="Delete" onclick={deleteFiles}></lightning-button>
+  <c-custom-datatable columns={columns} key-field="id" data={files} onrowaction={handleRowAction} resize-column-disabled></c-custom-datatable>
   <template if:true={showModal}>
     <section class="slds-modal slds-fade-in-open">
       <div class="slds-modal__container">
@@ -11,7 +12,7 @@
         </header>
         <div class="slds-modal__content">
           <template if:false={fileUpload}>
-            <lightning-datatable key-field="id" data={versionDetails} columns={versionColumns}></lightning-datatable>
+            <c-custom-datatable key-field="id" data={versionDetails} columns={versionColumns}></c-custom-datatable>
           </template>
           <template if:true={fileUpload}>
             <lightning-layout multiple-rows="true">

force-app/main/default/lwc/filesRelatedList/filesRelatedList.js

@@ -16,9 +16,12 @@ const BASE64EXP = new RegExp(/^data(.*)base64,/);
 const columns = [
   {
     label: "Id",
-    fieldName: "url",
-    type: "url",
-    typeAttributes: { label: { fieldName: "title" } }
+    fieldName: "id",
+    type: "filePreview",
+    typeAttributes: {
+      anchorText: { fieldName: "title" },
+      versionId: { fieldName: "latestVersionId" }
+    }
   },
   { label: "Uploaded Date", fieldName: "createdDate", type: "date" },
   { label: "Uploaded by", fieldName: "createdBy", type: "string" },
@@ -28,9 +31,9 @@ const columns = [
 const versionColumns = [
   {
     label: "Download Link",
-    fieldName: "url",
-    type: "url",
-    typeAttributes: { label: "Download" }
+    fieldName: "id",
+    type: "filePreview",
+    typeAttributes: { anchorText: "Download" }
   },
   { label: "Title", fieldName: "title", type: "string" },
   { label: "Reason for Change", fieldName: "reasonForChange", type: "string" },
@@ -52,26 +55,30 @@ export default class FilesRelatedList extends LightningElement {
   versionDetails = [];
   fileUpload = false;
   _currentDocId = null;
+  showPreview = false;
+  currentPreviewFileId = null;
 
   handleFileNameChange(event) {
     this.fileTitle = event.detail.value;
   }
 
   handleFileChange() {
+    //{{{
     const inpFiles = this.template.querySelector("input.file").files;
     if (inpFiles && inpFiles.length > 0) this.fileName = inpFiles[0].name;
-  }
+  } //}}}
 
   @wire(getRelatedFiles, { recordId: "$recordId" })
   getFilesList(filesList) {
+    //{{{
     this._filesList = filesList;
     const { error, data } = filesList;
     //{{{
     if (!error && data) {
       this.files = data;
       console.log("files found " + JSON.stringify(this.files));
     }
-  } //}}}
+  } //}}}}}}
 
   closeModal() {
     //{{{
@@ -101,7 +108,24 @@ export default class FilesRelatedList extends LightningElement {
     }
   } //}}}
 
+  deleteFiles() {
+    //{{{
+    const selectedRowIds = this.template
+      .querySelector("c-custom-datatable")
+      .getSelectedRows()
+      .map((row) => row.id);
+    if (selectedRowIds.length > 0) {
+      let decision = confirm(
+        `Are you sure you want to delete ${selectedRowIds.length} records?`
+      );
+      if (decision) {
+        this._deleteRecord(selectedRowIds);
+      }
+    }
+  } //}}}
+
   _deleteRecord(recordIds) {
+    //{{{
     Promise.all(recordIds.map((id) => deleteRecord(id)))
       .then(() => {
         refreshApex(this._filesList);
@@ -122,7 +146,7 @@ export default class FilesRelatedList extends LightningElement {
           })
         );
       });
-  }
+  } //}}}
 
   newFileUpload() {
     //{{{
@@ -195,6 +219,7 @@ export default class FilesRelatedList extends LightningElement {
   } //}}}
 
   _createContentDocLink(cvId) {
+    //{{{
     createContentDocLink({
       contentVersionId: cvId,
       recordId: this.recordId
@@ -218,5 +243,5 @@ export default class FilesRelatedList extends LightningElement {
           })
         );
       });
-  }
+  } //}}}
 }

force-app/main/default/staticresources/nopreviewimg.resource-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
+    <cacheControl>Private</cacheControl>
+    <contentType>image/png</contentType>
+</StaticResource>

sfdx-project.json

@@ -8,4 +8,4 @@
   "namespace": "",
   "sfdcLoginUrl": "https://login.salesforce.com",
   "sourceApiVersion": "48.0"
-}
+}