New upload feature in Microsoft Graph Toolkit (MGT) File List component

Context

Microsoft Graph Toolkit (MGT) latest release v2.3.0 introduced a brand new upload feature in the File List component which is really cool and useful for every Microsoft 365 developer. In this article, I’ll show you how to use this new feature in a SharePoint Framework (SPFx) and React web part project context so let’s go!

File List component upload feature

First of all, before using Microsoft Graph Toolkit components you need to setup your project for SharePoint Framework. Once it’s done, you are ready to use and customize the File List component. Just import it with the following code:

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

Now to activate the upload feature on the component, you need to use the property enable-file-upload as below:

<FileList enableFileUpload></FileList>
File List component with the upload feature activated.

You can use the following properties to customize the behavior of the component:

  • max-upload-file: set the maximum files to upload
  • max-file-size: set the maximum size (KB) of the files to upload
  • excluded-file-extensions: set file extension restrictions

Here is an example how to use all of these properties with some screenshots of the related error messages:

<FileList enableFileUpload maxFileSize={40} maxUploadFile={1} excludedFileExtensions={[".pdf",".doc"]}></FileList>
Error message when using the excludedFileExtensions property.
Error message when using the maxUploadFile property.
Error message when using the maxFileSize property.

Permissions

Don’t forget to add the right permissions in the manifest file based on your needs for example:

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Files.Read.All"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Sites.Read.All"
  }
]

This upload feature is a really great add to the Microsoft Graph Toolkit File List component and I hope this article will be useful for you to start using it in your future SharePoint Framework web part projects or other Microsoft 365 web development projects (JavaScript, Angular, etc.).

Happy coding everyone!

Resources

https://docs.microsoft.com/en-us/graph/toolkit/overview

https://docs.microsoft.com/en-us/graph/toolkit/components/file-list

https://docs.microsoft.com/en-us/graph/toolkit/get-started/overview

https://docs.microsoft.com/en-us/graph/toolkit/get-started/mgt-react

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s