0

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

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.