File component in Microsoft Graph Toolkit
The File component is used to represent an individual file/folder from OneDrive or SharePoint by displaying information such as the file/folder name, an icon indicating the file type, and other properties such as the author, last modified date, or other details. You can provide the identifiers for a file and the component will generate the query to retrieve the file based on the identifiers provided. This component can be used on its own or as part of the mgt-file-list components.
Example
The following example displays a file using the mgt-file
component. You can use the code editor to see how properties change the behavior of the component.
Properties
You can use several properties to customize the component.
Attribute | Property | Description |
---|---|---|
file-query | fileQuery | The full query or path to the file to be retrieved. |
drive-id | driveId | The ID of the drive the file belongs to. Must also provide either item-id or item-path . |
group-id | groupId | ID of the group the file belongs to. Must also provide either item-id or item-path . |
site-id | siteId | ID of the site the file belongs to. Must also provide either {item-id} or {item-path} . Provide the {list-id} too if you’re referencing a file from a specific list. |
list-id | listId | ID of the list the file belongs to. Must also provide {site-id} and {item-id} . |
item-id | itemId | ID of the file. Default query is /me/drive/items . Provide {drive-id} , {group-id} , {site-id} , or {user-id} to query a specific location. |
item-path | itemPath | Item path of the file. Default query is /me/drive/root . Provide {drive-id} , {group-id} , {site-id} , or {user-id} to query a specific location. |
insight-type | insightType | Type of insight the file is retrieved from. Can be trending , used , or shared . |
insight-id | insightId | ID of the insight resource. |
file-details | fileDetails | Set to an object representing a file |
file-icon | fileIcon | Set to an icon to show for the file |
view | view | Set to control how the file is rendered. The default is oneline . image - show only the icon oneline - show the icon and one line of text (default is file name ) twolines - show the icon and two lines of text (name and lastModifiedDateTime by default)threelines - show the icon and three lines of text (name , lastModifiedDateTime , and displayName of the author by default) |
line1-property | line1Property | Sets the property of fileDetails to use for the first line of text. Default is name of the file. |
line2-property | line2Property | Sets the property of fileDetails to use for the second line of text. Default is lastModifiedDateTime . |
line3-property | line3Property | Sets the property of fileDetails to use for the third line of text. Default is size of the file. |
The following example changes the behavior of the component to fetch data from a specific query.
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>
The following example changes the behavior of the component to fetch data from a specific query, show three lines of information - file name, last modified date time, and file size by default - and set the file icon.
<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2" view="threeLines" file-icon="ICON_PATH"></mgt-file>
The following example changes the behavior of the component to fetch data from a specific drive.
<mgt-file drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd" item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"></mgt-file>
The following example changes the behabior of the component to fetch data from a SharePoint site and path.
<mgt-file site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd" item-Path="/DemoDocs/AdminDemo"></mgt-file>
The following example changes the behavior of the component to fetch data by insight type.
<mgt-file insight-type="shared" insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"></mgt-file>
CSS custom properties
The mgt-file
component defines the following CSS custom properties.
mgt-file {
--file-type-icon-size: 28px;
--file-border: none;
--file-box-shadow: none;
--file-background-color: #ffffff;
--font-family: 'Segoe UI';
--font-size: 14px;
--font-weight: 400;
--text-transform: none;
--color: #323130;
--line2-font-size: 12px;
--line2-font-weight: 400;
--line2-color: #797775;
--line2-text-transform: none;
--line3-font-size: 12px;
--line3-font-weight: 400;
--line3-color: #797775;
--line3-text-transform: none;
}
To learn more, see styling components.
Microsoft Graph APIs and permissions
This control uses the following Microsoft Graph APIs and permissions.
Configuration | Permission Scopes | API |
---|---|---|
Developer provides {drive-id} AND {item-id} |
Files.Read, Files.Read.All, Sites.Read.All | GET /drives/{drive-id}/items/{item-id} |
Developer provides {drive-id} AND {item-path} |
Files.Read, Files.Read.All, Sites.Read.All | GET /drives/{drive-id}/root:/{item-path} |
Developer provides {group-id} AND {item-id} |
Files.Read, Files.Read.All, Sites.Read.All | GET /groups/{group-id}/drive/items/{item-id} |
Developer provides {group-id} AND {item-path} |
Files.Read, Files.Read.All, Sites.Read.All | GET /groups/{group-id}/drive/root:/{item-path} |
Developer provides ONLY {item-id} |
Files.Read, Files.Read.All, Sites.Read.All | GET /me/drive/items/{item-id} |
Developer provides ONLY {item-path} |
Files.Read, Files.Read.All, Sites.Read.All | GET /me/drive/root:/{item-path} |
Developer provides {site-id} AND {item-id} |
Files.Read, Files.Read.All, Sites.Read.All | GET /sites/{site-id}/drive/items/{item-id} |
Developer provides {site-id} AND {item-path} |
Files.Read, Files.Read.All, Sites.Read.All | GET /sites/{site-id}/drive/root:/{item-path} |
Developer provides {site-id} AND {list-id} AND {item-id} |
Files.Read, Files.Read.All, Sites.Read.All | GET /sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem |
Developer provides {user-id} AND {item-id} |
Files.Read, Files.Read.All, Sites.Read.All | GET /users/{user-id}/drive/items/{item-id} |
Developer provides {user-id} AND {item-path} |
Files.Read, Files.Read.All, Sites.Read.All | GET /users/{user-id}/drive/root:/{item-path} |
insight-type is set to trending AND developer provides {insight-id} |
Sites.Read.All | GET /me/insights/trending/{insight-id}/resource |
Developer provides {user-id or upn} AND {insight-id} AND insight-type is set to trending |
Sites.Read.All | GET /users/{id or userPrincipalName}/insights/trending/{insight-id}/resource |
insight-type is set to used AND developer provides {insight-id} |
Sites.Read.All | GET /me/insights/used/{id}/resource |
Developer provides {user-id or upn} AND {insight-id} AND insight-type is set to used |
Sites.Read.All | GET /users/{id or userPrincipalName}/insights/used/{id}/resource |
insight-type is shared AND developer provides {insight-id} |
Sites.Read.All | GET /me/insights/shared/{id}/resource |
Developer provides {user-id or upn} AND {insight-id} AND insight-type is set to shared |
Sites.Read.All | GET /users/{id or userPrincipalName}/insights/shared/{id}/resource |
Templates
The mgt-file
component supports several templates that allow you to replace certain parts of the component. To specify a template, include a <template>
element inside of a component and set the data-type
value to one of the following:
Data Type | Data Context | Description |
---|---|---|
loading | none | The template to render while the component is in a loading state. |
no-data | none | The template to render when no file data is available. |
default | file: the file details object | The default template replaces the entire component with your own. |
Authentication
The control uses the global authentication provider described in the authentication documentation to fetch the required data.
Cache
Object store | Cached data | Remarks |
---|---|---|
driveFiles |
List of files by drive id | Used when driveId is provided |
groupFiles |
List of files by group id | Used when groupId is provided |
siteFiles |
List of files by site id | Used when siteId is provided |
userFiles |
List of files by user id | Used when userId is provided |
insightFiles |
List of files by insights | Used when insightType and insightId are provided |
fileQueries |
List of files by queries | Used when fileQuery is provided |
For details about how to configure the cache, see Caching.
Feedback
Submit and view feedback for