lightning:fileupload - Reduce number of files to upload to a single file at a time

This looks like a bug to me for sure .The component outputs a HTML tag as below for the code

<lightning:fileUpload label="Attach receipt"
    name="fileUploader"
    accept=".pdf,.png"
    recordId="{!v.recordId}" 
    onuploadfinished="{!c.handleUploadFinished}" />

This is output as below . Notice multiple attribute in the input html tag .

<input type="file" id="input-1" aria-labelledby="input-1-form-label input-1-file-body-label" accept=".pdf,.png" multiple="" name="fileUploader" class="slds-file-selector__input slds-assistive-text">

There is not lot you could do than server validation as the hooks before file upload is not exposed to you as the developer .So report as a bug to SFDC .

Update

Sounds like SFDC has a fix .The below code is believed to work

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > 
  <aura:attribute name="myRecordId" type="String" description="Record to which the files should be attached" /> 
  <aura:attribute name="multiple" type="Boolean" default="false" /> 
     <lightning:fileUpload label="Attach receipt." 
   multiple="{!v.multiple}" 
  accept=".pdf, .png" 
  recordId="xxxxxxxxxxxxxxx" 
  onuploadfinished="{!c.handleUploadFinished}" 
   aura:id="lightningfileUpload"/> 
</aura:component> 

The controller code

({ 
    handleUploadFinished: function (cmp, event) { 
//  Get the list of uploaded files 
    var uploadedFiles = event.getParam("files"); 
    alert("Files uploaded : " + uploadedFiles.length); 
   } 

}) 

After hours of pain, I found a workaround.

Before this workaround, the lightning fileupload component creates an html like this:

<input type="file" id="input-1" aria-labelledby="input-1-form-label input-1-file-body-label" accept=".pdf, .jpg" multiple="" class="slds-file-selector__input slds-assistive-text">

After the workaround was implemented, the multiple="" disappeared.

The workaround is to explicitly set the multiple attribute to false in the controller.

The fileupload will look something like this (the important thing in this one is the aura:id, which will be used later):

<lightning:fileUpload 
    label="Attach receipt"
    multiple="false" 
    accept=".pdf, .jpg"
    recordId="{!v.recordId}" 
    onuploadfinished="{! c.handleUploadFinished }" 
    aura:id="lightningFileUpload" />

In the component, I added a handler to the render event:

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

Once the render event finishes, I call the fileupload component, and set its multiple attribute to false:

onRender : function(component, event, helper) {
  component.find("lightningFileUpload").set("v.multiple", false);
}

It's the nearest workaround I can find that doesn't involve hacking my way via css, vanillaJS, or even catching stuff in the ContentDocument trigger.