[SalesForce] How to make lightning:fileUpload component required field on flows

This cannot be done with the lightning:fileUpload component.

I solved this problem with the lightning:openFiles event.

This way a user has a preview of the file and inside the previewer you can upload a new version, delete, download and so on:

Here is some code sample:

Markup

<aura:attribute name="file" type="ContentDocumentLink" description="content file - taken from server" />

<div onclick="{!c.previewFile}" id="{!file.ContentDocumentId}">
    <lightning:tile label="{!file.fileName}" title="Click to preview and manage uploaded file">
        <aura:set attribute="media">
            <lightning:icon iconName="doctype:unknown" size="xx-small"/>
        </aura:set>
    </lightning:tile>
</div>

Controller

previewFile: function(component, event, helper) {
    var contentId = event.currentTarget.id;
    $A.get('e.lightning:openFiles').fire({
        recordIds: [contentId]
    });
},

If you're not "satisfied" with the OOTB component, you are almost better off creating your own. You can view peter knowles FileController.cls Lightning component and style as needed. Otherwise, your only option will be to "overwrite" the current components CSS, and there is no "Clean" way to do this.

Here is a minimal CSS code sample (No scope) to achieve something similar to your icon only button alongside a few tips:

set the outermost element to:

visibility: hidden

and the innermost to

visibility: visible

then, you can set a width to your component and hide the overflow text (to keep the icon:

width: 30px;
display: block;
overflow: hidden;
visibility: visible;

and set a margin to the primitive icon:

    margin-left: -Xpx;

And this should result in a small upload widget such as :