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>
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>
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
Yves Habersaat - Microsoft 365 Development MVP & MCT 
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
LikeLike
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.
LikeLike
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
LikeLike
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?
LikeLike