Append files to the first upload in <lightning:input type="file">

Question

I am using the following code in my lightning component to upload multiple files

<lightning:input aura:id="fileId" onchange="{!c.handleUploadFinished}" type="file" name="file" label="Upload Attachment" multiple="true"/>

JS Controller Code handleUploadFinished: function (component, event, helper) {

    // Get the list of uploaded files

    var fileInput = component.find("fileId").get("v.files");

}

1. So what I can see is that if I upload 2 files together, then upload another one, the previous two files get removed. My question is that is there any possible way to append the 3 files together instead of the first two getting removed?

2. My second question would be that can I assign the fileInput to an array attribute of the corresponding component? If so then what would be attribute type?

I am using the following blog as the base. http://sfdcmonkey.com/2017/09/25/file-upload-lightning-component

Answer 1

So what I can see is that if I upload 2 files together, then upload another one, the previous two files get removed. My question is that is there any possible way to append the 3 files together instead of the first two getting removed?

No, this is a browser-level API. It's strictly read-only and depends on what the user chooses as the files.

My second question would be that can I assign the fileInput to an array attribute of the corresponding component? If so then what would be attribute type?

It's not a real array, it's an "array-like object." The design decision for this is based on the fact that it is a read-only object called FileList, and so you can't do normal array stuff to it directly. Converting to a normal array is easy enough:

var filesAsArray = [].slice.call(fileList);

As long as you do this first, you can save the File objects in to a List. I wouldn't recommend trying to store the original fileList directly, as it will be modified when a user selects new files.

Answer 2

Actually I was able to do appending of files using a ContentVersion attribute type.

I used the following code in my component

 <aura:attribute name="fileList" type="Attachment[]"/>

 <lightning:input aura:id="fileId" onchange="{!c.handleUploadFinished}" type="file" name="file" label="Upload Attachment" multiple="true"/>

JS COntroller Code handleUploadFinished: function (component, event, helper) {

    // Get the list of uploaded files        
    var uploadedFileList = event.getSource().get("v.files");
    var existingFileList = component.get("v.fileList");        
    var fileList = [];

    for (var i = 0; i < existingFileList.length; i++) {
        fileList.push(existingFileList[i]);
    }
    for (var i = 0; i < uploadedFileList.length; i++) {
        fileList.push(uploadedFileList[i]);
    } 
    component.set("v.fileList", fileList);        

},

The above seems to be working correctly.