How to populate a Picklist field and also save uploaded files using Lightning Components

Question

I'm trying to create a lightning component for KYC Verification. And for that, we are trying to access a picklist field- 'Verification Id'. The data is not getting saved. Also, the files are not getting saved. I'm quite new in lightning components, can someone please help?

The component looks like this- test.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId" access="global">
    <aura:attribute name="Customer__c" type="Customer__c" 
           default="{ 'sobjectType': 'Customer__c' }"/>
     Choose Verification ID:  <force:inputField value="{!v.Customer__c.Verification_ID__c}"/><!-- My picklist Field--><br/><br/>
     <aura:attribute name="filetype" type="List" default="['.png', '.jpg', '.jpeg', '.pdf']" />
     <lightning:fileUpload label="Verification Id"
        name="fileUploader"
        multiple="true"
        accept="{!v.filetype}"
        recordId="{!v.recordId}" onuploadfinished="{!c.handleUploadFinished}" /><br/>
       <lightning:button variant="brand" type="button" name="Save" label="Save" onclick="{! c.handleClick }" />
</aura:component>

testController.js

({
    handleUploadFinished: function (cmp, event) {
        // Get the list of uploaded files
        var uploadedFiles = event.getParam("files");
        alert("Files uploaded : " + uploadedFiles.length);
        // Get the file name
        uploadedFiles.forEach(file => console.log(file.name));
    },
    handleClick : function (cmp, event, helper) {
        alert("You clicked: " + event.getSource().get("v.label"));
    },
})

The picklist value from the form needs to save in the field verification Id here.

Answer 1

There are two parts to your question:-

1. Saving the verification Id on Customer record -

To do so, Instead of using force:InputField, you should use the lightning:inputField component in lightning:recordEditForm to display and edit the value of a record field on a Salesforce object. Use the fieldName attribute to specify the API field name.

<aura:component>
    <aura:attribute name="recordId" type="String" />
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Customer__c">
        <lightning:messages />
        <lightning:inputField fieldName="Verification_ID__c" />
        <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
    </lightning:recordEditForm>
</aura:component>

The above component will automatically saves the field value to the current record where you load the component.

2. Uploading a file on current record

The code you have for uploading the file looks good to me. You can just use a refresh event to make sure the file related list shows up the file automatically once file is uploaded.

({
    handleUploadFinished: function (cmp, event) {
        $A.get('e.force:refreshView').fire();
    }
})

Finally, Your Component file should like this:-

   <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
        <aura:attribute name="filetype" type="List" default="['.png', '.jpg', '.jpeg']" />
        <aura:attribute name="multiple" type="Boolean" default="true" />
        <aura:attribute name="disabled" type="Boolean" default="true" />
        <aura:attribute name="recordId" type="String" />
        <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Customer__c">
            <lightning:messages />
            <lightning:inputField fieldName="Verification_ID__c" />
            <lightning:fileUpload label="Verification Id" name="fileUploader" multiple="true" accept="{!v.filetype}"
                recordId="{!v.recordId}" onuploadfinished="{!c.handleUploadFinished}" />
            <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
        </lightning:recordEditForm>
    </aura:component>