Spinners with file inputs

Question

I have 7 inputs of files and I want to add spinners to each input. How can I achieve this? I can`t use standart lightning:fileUpload but only lightning:input type="file"

Answer 1

The lightning:input aura component is more DIY than lightning:fileUpload as you need to provide your own event handlers and Apex code to handle the file upload (per the documentation on the component). If you want to display a spinner that's easy enough to accomplish by using an onchange handler on your component to show and hide a spinner based on the file being uploaded.

<!-- cmp file -->
<div>
    <div role="status" class="slds-spinner slds-spinner_medium slds-hide" aura:id="spinner">
        <span class="slds-assistive-text">Uploading...</span>
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
    </div>
    <lightning:input type="file" onchange="{! c.handleFileUpload }" />
</div>

/* Controller */

handleFileUpload : function(cmp, event, helper) {
    // find the spinner and show it
    let spinner = cmp.find('spinner');
    $A.util.toggleClass('slds-hide');

    // handle the file upload, in callback hide the spinner again
}

You may need some additional styling to get the spinner to look its best, but the foundations should be here.