lightning:fileUpload is coming as disabled

Question

I have a lightning component which has a form. The details provided in the form in turn creates a case record in the back-end. I want to attach multiple drag and drop files along with the details provided in the form. For that I am using the following piece of code

<div>
    <lightning:fileUpload label="Attach receipt" 
                          multiple="true" 
                          accept=".pdf, .png, .jpeg, .jpg"
                          onuploadfinished="{!c.handleUploadFinished}" />
</div>

However, the fileupload input is coming as disabled. I have added the lightning component in a lightning tab and checked there. I have also checked in a stand alone app.

From what I uderstand the reason might be because, I do not have a record Id which will be related to the file. If that is the reason, is there any workaround for this. Also, is there any other way of uploading multiple files?

Answer 1

From documentation:

File uploads are always associated to a record, hence the recordId attribute is required.

As for:

I have also checked in a stand alone app

The reason is because it's not supported in stand alone app

Usage Considerations

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input.

---

The component allows multiple file uploads. However you will need a recordId.

A lightning:fileUpload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.

As for your case, you can create a dummy record and use that only for file uploads, and then once you have your target record created, associate files back to that record. You will need quite a few custom logic to do that way though.

OR

Use lightning:input type="file" to create your own custom component, where it supports multiple uploads and does not require any record id.

<lightning:input name="file1" type="file" label="Attachment" multiple="true" accept="image/png, .zip" onchange="{! c.handleFilesChange }"/>