MGT File List control in SPFx

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the File List control.

---

I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.

---

The File List control is used to display the content of a folder using the Microsoft Graph APIs and it’s extremely convenient. As usual we start from the result of the custom sample I prepared.

In this sample I used only a few of the possible configurations of the control, the section titles are self explanatory, but I think that the last one is the most interesting configuration which enables the user to also upload files directly from the page.

If the user clicks on one of the element, and this is the default behavior, it opens a new tab and opens the same file or folder inside OneDrive.

When the control is configured to allow uploading you can also limit:

• the number of files to be uploaded
• the size of the files
• the extensions that are allowed

If the user select a file with an extension that is not allowed will receive a message like the following:

In case the file has an allowed extension it will be uploaded and the resulting UI will be the following:

The code

The code is pretty straight forward, to import the control use:

import { FileList } from '@microsoft/mgt-react';

The minimal use of the control is the following:

<FileList></FileList>

Which displays the content of the OneDrive root folder of the current user.

You can also specify many others parameter to filter the content to display, to have a look at all the possible properties check out the official documentation here.

In the sample I created there is the possibility to specify the target drive item id to be displayed and can be achieved in this way:

<FileList  itemId={itemId}></FileList>

It is also possible to limit the files and folders that are shown in the control using the pageSize property.

Another interesting configuration is the insightType property which allows the user to see three different categories of files:

• trending
• shared
• used

The usage is simple and is as following:

<FileList  insightType='shared'></FileList>

The final configuration that I will cover is the one that allows the user to upload files. To enable the file upload just set the enableFileUpload property to true and to filter the allowed file extensions use the excludedFileExtensions and pass the array list of the excluded file extensions:

<FileList
  itemId={itemId}
  enableFileUpload={true}
  excludedFileExtensions={['.xlsx', '.zip']}>
</FileList>

Noteworthy

All the MGT controls relies on the permissions given to the Entra ID application “SharePoint Online Client Extensibility Web Application Principal”, to check which permissions you need based on the properties used you can check the official permissions table here.

Conclusion

To wrap up this is quite an interesting, easy to use and convenient control, if you’re interested in knowing more you can check out the official documentation here and if you want to check out the sample I created you can find it here.

Hope this helps!