File Upload component in Flow - no indication that files where uploaded

Question

I am using the File Upload component in Flow.

It works good, but I have no indication that the files where uploaded.

So the flow looks exactly the same before and after I upload files:

Before clicking Upload Files:

After clicking Upload Files:

The window for selecting files from the hard drive is opened:

After selecting files to upload:

After clicking Done:

QUESTION

Can I have an event or an indication or a visual change when file is finishing uploading?

This is a very bad user experience, the user does not know if files where uploaded and how many etc - is this the way Salesforce developed this component? it looks very bad...

Answer 1

An easy solution for this until such time as SFDC enhances the OOTB component can be found in the UnofficialSF set of Flow components.

Specifically, the File Uploader Improved component (a packaged LWC)

Here's what it looks like:

Before upload

After upload

Answer 2

In Store Output Values you have Content Document IDs and Uploaded File Names. You can use text collection variables for storing these. You can show these details after clicking on done.

--- added ---

If the collection variable is shown in same screen, its not updating. Instead you need to put the collection variable in next screen in Output text.

On next screen:

Will let you know if I come across a solution where we can show in same screen.

Note: Using custom component, you can use lightning:fileUpload component and onuploadfinished event which fires when you click on Done and you can show immediately with all details like Name, Size, type etc

-------------------------------------------------------------
---- added --------------------------------------------------
-------------------------------------------------------------

If you would like to create custom component, there is a generic component (in-progress) which you can use, you get some inferences. This is git repo: https://github.com/sasank-sfdcdev/public/tree/master/src/lwc/datatable.

---

Here is the generic component which you can use for exactly this functionality - https://github.com/sasank-sfdcdev/public/tree/master/src/lwc/upload - Also this can be used in both AURA and LWC (pls note that this is in progress)

Using this component, you can:

1. Get the files owned by current user

2. Search for files

3. Use this in scenario where file has to be uploaded while creating any record like account/case etc.

Note that this uses another component which you can download from same location.

You can use it like below:

<template>
    <c-upload parent-id={parentId}
              label="Upload Files"
              accept=".jpg,.jpeg,.pdf,.png">
    </c-upload>
</template>

You will get the UI as below:

Answer 3

from the upload element, you can store the uploaded file names in a text collection variable, just show those text collection in UI in next component