function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Swapnil Patne 4Swapnil Patne 4 

Store and display Uploaded files' name in Lightning flow on the same screen

Hello,

Q - how can we display Uploaded file names in Lightning flow on the same screen?

I am hoping someone can help.

I have created a flow on the case object in which I have used file upload component, now I want to display the file names underneath that component after the files are uploaded. (see red arrow for reference in the image attached) 
 
User-added image
Thank you in advance.

Swapnil

 
Anant Mahajan 10Anant Mahajan 10
Swapnil,
Were you able to get an answer for this?
praveena y 15praveena y 15
Swapnil, Did you figure out a way to display filenames in sames screen?
 
Andee Weir 17Andee Weir 17
I believe it needs to be a custom component e.g. 

Apex Class : FlowUploadFilesCtrl
public with sharing class FlowUploadFilesCtrl {
    public FlowUploadFilesCtrl() {

    }

    /**
    * @description Attach the uploaded document to record id
    * @param list<String> document ids
    * @param String record Id that the documents relate to 
    */ 
    @AuraEnabled
    public static void FileUploader(list<string> documentIds, String recordId, boolean removePreviousDocuments){

        if(recordId == null){
            return;
        }
        
        // remove any existing docs which may have been previously added.
        if(removePreviousDocuments){
            database.delete( [select id from contentDocumentLink where linkedEntityId = :id.valueOf(recordId)], false);
        }        

        if (documentIds.size() == 0){
            return;
        }

        list<contentdocumentlink> contentDocLinks = new list<contentDocumentlink>();
        for(string documentId : documentIds){
            contentDocLinks.add(new contentDocumentlink (linkedEntityId  = id.valueof(recordId) , contentDocumentId  =  id.valueof(documentId) ));
        }

        database.insert(contentDocLinks, false);
	
    }
}

LWC : fileUploadFilesLwc

.html
<template>
    {fileUploadLabel}
    <lightning-file-upload name="fileUploader" record-id={recordId}  onuploadfinished={handleFileUpload} multiple={allowMultipleFiles}>
    </lightning-file-upload>
    <template if:true={documentPresent}>
        <b>Attached Documents: </b>{documentNames}
    </template>
</template>

.js
import { LightningElement, api, track } from 'lwc';
import FileUploader from '@salesforce/apex/FlowUploadFilesCtrl.FileUploader';

export default class FlowUploadFilesLwc extends LightningElement {

	@api fileUploadLabel = 'Upload File'; 
    @api recordId;    
    @api allowMultipleFiles; 
    @api removePreviousDocuments;
	@track documentPresent = false;
	@track documentNames ='';
    allDocumentNameArray = [];
    allDocumentIdArray = []; 
    documentIds = [];

	handleFileUpload(event){
		const uploadedFiles = event.detail.files;
        this.documentIds = [];

        // Reset the 'all' arrays if removing previous documents
        if(this.removePreviousDocuments){
            this.allDocumentNameArray = [];
            this.allDocumentIdArray = [];
        }

        // Add the newly selected to the allDocumentIds array & allDocumentNameArray if not already added
		for(var i = 0; i < uploadedFiles.length; i++) {
            if(this.allDocumentIdArray.includes(uploadedFiles[i].documentId) == false){
                this.allDocumentIdArray.push(uploadedFiles[i].documentId);
                this.allDocumentNameArray.push(uploadedFiles[i].name);
                // Also include on the 'this time push' array
                this.documentIds.push(uploadedFiles[i].documentId);                  
            }         
		}

        // Rebuild the list of file names from the allDocumentNameArray
        this.documentNames = '';
        for (var i = 0; i < this.allDocumentNameArray.length; i++) {
            if(i == 0){                
                this.documentNames += this.allDocumentNameArray[i];
                this.documentPresent = true;
            } else {
                this.documentNames += ', ' + this.allDocumentNameArray[i];
            }
        }


        FileUploader({ documentIds: this.documentIds , recordId : this.recordId, removePreviousDocuments : this.removePreviousDocuments})
		.then(result => {

        })
        .catch(error => {
            this.error = error;
            console.log('error:' + error);
        });

	}	

}

.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
      <masterLabel>FlowUploadFilesLwc</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="fileUploadLabel" type="String" label="(In) fileUploadLabel : Label shown above File Upload component"/>
            <property name="recordId" type="String" label="(In) recordId"/>
            <property name="allowMultipleFiles" type="Boolean" label="(In) allow multiple file selection"/>
            <property name="removePreviousDocuments" type="Boolean" label="(In) remove all previous attached documents"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
This will attach the selected documents to the supplied recordId. Feel free to change as required.

Showing attached docs
Andee