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

4 thoughts on “New upload feature in Microsoft Graph Toolkit (MGT) File List component

  1. Hi, mgt-file.list uploads the files only on onedrive root folder also changing the file-list-query. There is a way to upload the files in right context? thanks

    Like

    1. Hi Mauro, you can easily upload files in a specific context by adding an itemId property to the FileList component. In this case, your files will be uploaded in the folder id of your OneDrive space specified in this property.

      Like

  2. Hi Yves,
    i am able to upload files only on my Onedrive root. When i try to upload them everywhere i get error 400.
    I need to upload them on sharepoint folder.
    My scenario is as follows:
    Angular and Aspnet core
    I authenticated by ProxyProvider from my backend.
    The graph tool kit components work all only mgt-file-list has many problems for example the attribute file.list-query doesn’t accept the variables form ts(not working).

    Providers.globalProvider = new ProxyProvider(environment.proxyProvider, async () => {
    const token = this.azureAdService.accessToken.value;
    let headers = {
    ‘Authorization’: `Bearer ${token}`
    }

    return headers

    });

    Providers.globalProvider.setState(ProviderState.SignedIn);

    //
    [HttpPut]
    [Route(“{*all}”)]
    public async Task PutAsync(string all, [FromBody] object body)
    {
    return await ProcessRequestAsync(Microsoft.Graph.HttpMethods.PUT, all, body).ConfigureAwait(false);
    }

    have you any idea?

    thanks

    Like

    1. Hi Mauro, didn’t experimented this kind of scenario. Do you have a GitHub repos where I can have a look at the whole project and maybe trying to help you?

      Like

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 )

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