File list component - multilselect?

[jbk75]

Hi, is it possible to select multiple files in the FileList component ?

[ghost]

Hello jbk75, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[musale]

Hello @jbk75 thank you for your question. At the moment, that is not possible. I wonder what your usecase with mgt-file-list is like but I came up with a workaround you might consider?

The mgt-file-list component has a custom event itemClick that is emitted when you click a file in the file list. You can read more about it here and implementation details here.

What I'm thinking about is:

• getting the clicked file details when you click a file item,
• add it to a list of clicked file items,
• render the list of files in a new node using mgt-file,
• remove the file from the list of clicked items when you click on it again.

In vanilla JS you can implement that:

const mgtFileList = document.querySelector("mgt-file-list");
const files = [];

mgtFileList.addEventListener("itemClick", (event) => {
    const fileDetails = event.detail;
    if (!hasFile(fileDetails)) {
        files.push(fileDetails);
    } else {
        // remove file
    }

    const selectedDiv = document.getElementById("selectedFiles");
    selectedDiv.innerHTML = "";
    for(const file in files){
        const mgtFile = document.createElement("mgt-file");
        mgtFile.fileDetails = fileDetails;
        selectedDiv.appendChild(mgtFile);
    }
});

function hasFile(fileDetails) {
    const fileId = fileDetails.id;
    if(files.length > 0){
        for (const file of files) {
            if (file.id === fileId) return true;
        }
    }
    return false;
}

function removeFile(fileDetails){
    // Might need your personal touch 😄 
}

And couple that up with this HTML:

<mgt-file-list></mgt-file-list>

<br>

<div id="selectedFiles">
	<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
	<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>

</div>

You can test that out in the mgt playground editor here.

Note

From this issue, I have come to realize some "design flaws" we might experience if we implement this feature. I have a discussion ongoing here and feel free to add your comments too. Especially based on your use case.

[jbk75]

Thanks Musale! I will check this out.

[sebastienlevert]

Just adding that even if you have this workaround, this should be considered as an OOTB feature in this component. We'll consider it in future planning sessions. Thanks!