MGT File control in SPFx
Tags: microsoftgraphtoolkit, spfx
Published: 2024-03-15 10:23:11

---
title: MGT File control in SPFx
published: true
date: 2024-03-13 10:00:00 UTC
tags: SharePointFramework,MicrosoftGraphToolkit
canonical_url: https://iamguidozam.blog/2024/03/13/mgt-file-control-in-spfx/
---

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the **File** 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](https://iamguidozam.blog/2023/12/20/use-microsoft-graph-toolkit-with-spfx-and-react/) or have a look at the code of this [sample here](https://github.com/GuidoZam/blog-samples/tree/main/MGT/mgt-file-spfx)._

* * *

The **File** control is used only to display a single folder, if you’re planning on displaying a set of folder there is a better solution which is the [File List control](https://learn.microsoft.com/en-us/graph/toolkit/components/file-list).

Let’s see the UI result of the control:

- While loading

![](https://iamguidozamcode.files.wordpress.com/2024/02/image-16.png?w=822)

- With all the **File** controls loaded

![](https://iamguidozamcode.files.wordpress.com/2024/02/image-17.png?w=976)

### The code

To use the **File** control you have to import it using the following:

```
import { File, MgtTemplateProps } from '@microsoft/mgt-react/dist/es6/spfx';
```

**NB** : In this sample the **MgtTemplateProps** is used only for the custom template, if you’re not planning to define a custom template you can avoid importing the class.

The simplest way to use the control is, if you know the item id, the following:

```
<File itemId={itemId}/>
```

Or if you prefer you can use the API path:

```
<File fileQuery={`/me/drive/items/${itemId}`} />
```

Another fashion to select the item is to use the file path, for example:

```
<File itemPath="/MyFolder/UltraSecretDocument.docx" />
```

You can also manage the properties to display, for example you can display the item id and the last modified date like this:

```
 <File  fileQuery={`/me/drive/items/${itemId}`} line2Property='id' line3Property='lastModifiedDateTime' />
```

Moving on, you can use **MgtTemplateProps** to customize the template of the control, for example you can define a behavior for when the control is:

- loading
- does not have data
- the default visualization of the item

To achieve this you have to define a variable or a function that returns a JSX.Element, in my sample I used the following:

```
const FileTemplate = (props: MgtTemplateProps): JSX.Element => { // If the template is loading, show a spinner if (props.template === "loading") { return <Spinner label="Loading file..."></Spinner>; } // If the template has no data, show a message if (props.template === "no-data") { return <div>No data for the specified file</div>; } // If the template is for a file, show the custom file details if (props.dataContext && props.dataContext.file) { return ( <div> <i><Icon iconName="FavoriteStar" /> This is awesome!</i> <div>Size: {props.dataContext.file.size}</div> </div> ); } return <></>; }
```

which defines all the three customizations, and to tell the controls that you want to use your customization you can define it like so:

```
<File itemId={itemId}> <FileTemplate template="loading" /> <FileTemplate template="no-data" /> <FileTemplate template="default"/></File>
```

In this sample the **FileTemplate** element is the variable defined in the previous code block.

#### Conclusion

To wrap up: there are many configurations possible with the File control, in this sample I used only a few, if you’re interested in knowing more you can take a look at the official documentation [here](https://learn.microsoft.com/en-us/graph/toolkit/components/file) and check out the code of the sample [here](https://github.com/GuidoZam/blog-samples/tree/main/MGT/mgt-file-spfx).

Hope this helps!