UploadFiles not working with lightning component

Question

I'm working on a lightning component for a case form embedded inside a community. The problem is with the Upload File button: it appears grayed out and I can't click on it.

I can't figure out what I'm doing wrong. Any suggestions would be very much appreciated.

Apex Class:

@AuraEnabled  
    public static List<ContentDocument> getFiles(string recordId){ 
        Set<Id> recordIds=new Set<Id>{recordId};
        Set<Id> documentIds = new Set<Id>(); 
        List<ContentDocumentLink> cdl=[SELECT id,LinkedEntityId,ContentDocumentId FROM ContentDocumentLink WHERE LinkedEntityId IN:recordIds];  
        for(ContentDocumentLink cdLink:cdl){  
            documentIds.add(cdLink.ContentDocumentId);  
        }      
        return [SELECT Id,Title,FileType FROM ContentDocument WHERE id IN: documentIds];  
    } 

Component:

<aura:component
        implements="forceCommunity:availableForAllPageTypes,force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:appHostable"
        access="global" controller="TicketDeflectionController">
    <aura:attribute name="productSystemList" type="List" />
    <aura:attribute name="issueTypeList" type="List" />
    <aura:attribute name="subject" type="String" />
    <aura:attribute name="description" type="String" />
    <aura:attribute name="ticket" type="Ticket__c" />
    <aura:attribute name="knowledge" type="List" />
    <aura:attribute name="product" type="String" />
    <aura:attribute name="issueType" type="String" />
    <aura:attribute name="accept" type="List" default="['.jpg', '.jpeg']"/>
    <aura:attribute name="multiple" type="Boolean" default="true"/>
    <aura:attribute name="disabled" type="Boolean" default="false"/>
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="files" type="ContentDocument[]"/>

...

<lightning:fileUpload  name="fileUploader"
                           label= "Upload File"
                           multiple="{!v.multiple}"
                           accept="{!v.accept}"
                           disabled="{!v.disabled}"
                           recordId="{!v.recordId}"
                           onuploadfinished="{! c.handleUploadFinished }"/>

Function in Controller:

({
  onInit: function(cmp, event, helper) {
    helper.initialProductSystemList(cmp);
    helper.initialIssueTypeList(cmp);
    helper.getuploadedFiles(cmp);
  },
    handleUploadFinished: function (cmp, event) {
        var uploadedFiles = event.getParam("files");
        helper.getuploadedFiles(cmp);
        alert("Files uploaded : " + uploadedFiles.length);
    }

...

});

Helper:

getuploadedFiles:function(cmp){
        var action = cmp.get("c.getFiles");  
        action.setParams({  
            "recordId":cmp.get("v.recordId")  
        });      
        action.setCallback(this,function(response){  
            var state = response.getState();  
            if(state=='SUCCESS'){  
                var result = response.getReturnValue();           
                cmp.set("v.files",result);  
            }  
        });  
        $A.enqueueAction(action);  
    }

Answer 1

By default, guest users of community are not allowed to upload files and so you will see greyed out button. You can enable it through Setup:

Other references:

1. https://releasenotes.docs.salesforce.com/en-us/spring19/release-notes/rn_networks_guest_upload.htm .
2. https://help.salesforce.com/articleView?id=content_initialsetup.htm&type=5 .
3. https://help.salesforce.com/articleView?id=content_delivery_about.htm&type=5 .

Answer 2

I think this will help you: lightning:fileUpload displayed as disabled in community

Also, see the Usage Considerations:

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, if the Don't allow HTML uploads as attachments or document records security setting is enabled for your organization, the file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg. For more information, see Upload and Share Files in Salesforce Help.