The Lowdown on Uploading a File inside a Flow

One limitation that has always been really pesky with Visual Flow was the inability to easily add a File Upload into the Flow.  There have been some ways to tie it together through Visualforce, but it really wasn’t the smoothest experience.  Now, we get a big step forward with the out-of-the-box fileUpload Lightning Component (GA Spring ’18)!  I’m excited about what is possible with this in just the Spring ’18 release, but it goes to show you how much more is about to be possible in Flow.  So, let’s get into it!

Upload Files

Upload File Progress

Some things you’ll need to know … as there are some Input and Output options that don’t really work.  I am hopeful that Salesforce will clean this up when it goes GA though.  I’m going to be grouping these variables in that order, so that you don’t attempt to use a variable incorrectly.

Input Variables:

*File Upload Label – The text on the file upload button.

*Related Record ID – The ID of the record to associate the files with.  If no value is passed, the component is disabled.

Accepted Formats – The accepted file types.  Enter a comma-separated list of the file extensions (such as .jpg) that the user can Upload.   This is great, you can limit them to a specific type of file, to hopefully reduce the chance for incorrectly uploading the wrong file type.  While pictures of my dog are great, my company might only want me to be uploading a PDF inside this Flow.

Allow Multiple Files – Lets the user upload multiple files.

Disabled – Displays the component in a disabled state.  This allows you another way, besides not putting in a Record ID to disable the Upload ability without having to build two screens to dynamically hide it.

Hover Text – The tooltip to display when a user hovers over the component.

Output Variables:

Content Documentation IDs – The IDs of the uploaded files.  Store this value in a text collection variable.  Unless I am missing something, this really shouldn’t be an Input option, as it should be housing the Output IDs of the upload.

Uploaded File Name –  The names of the uploaded files.  Store this value in a text collection variable.  Unless I am missing something, this really shouldn’t be an Input option, as it should be housing the Output IDs of the upload.  I did attempt to rename the file I was uploading, and I was unsuccessful using a default value here.  

How do you get to the File Upload?  You’ve got to be inside a Screen Element.  Inside there, you’ll need to Look for the Extensions… which means you need to scroll down.


Drag out the Lightning Component

Add Lightning Component.png

Now, you’ll want to select from the dropdown the uploadFile component.


And, you’re all set to begin mapping your inputs and outputs.


Note – the Unique Name is not going to be visible to the End User on a Lightning Component, it’s just what is rendered in your preview on the Right.

With that understanding, let’s talk about some considerations…

We have to have a Related Record ID for the File Upload component to be active, this means we already must have the Record Created.  In some scenarios, this means you’re going to have to have two Flow Screens, and break the process up.  But, with the “Progress Indicator” that is on the roadmap to also be coming out, hopefully that isn’t really a big deal… and we’ll have something like this to let the User know where they’re at:


Another is that depending on what you’re doing, it might not make sense to use a Visual Flow with a Lightning Component embedded if you’re the one developing the Lightning Component.  In some scenarios I would find embedding a Lightning Component inside a Flow to be make things more complex (which is good not to do).  So, in some cases you’d be better off developing a Lightning Component that does what you wanted to do, and not use Visual Flow (gasp, I said it).  But, if you’re looking for a functional add-on solution like Uploading a File or showing a Process Bar, those are definitely value-add and make a ton of sense to pop into a Visual Flow.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s