Componente de arquivo no Microsoft Graph Toolkit

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

O componente Arquivo é usado para representar um arquivo/pasta individual do OneDrive ou do SharePoint. O componente exibe informações como o nome do arquivo ou pasta, o ícone de tipo de arquivo e a data do autor e da última modificação. Você pode fornecer os identificadores para um arquivo, e o componente gera a consulta para recuperar o arquivo com base nos identificadores fornecidos. Esse componente pode ser usado sozinho ou como parte dos componentes mgt-file-list .

Exemplo

O exemplo a seguir exibe um arquivo usando o mgt-file componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.

HTML
React

Abra este exemplo no mgt.dev.

Propriedades

Você pode usar várias propriedades para personalizar o componente.

Atributo	Propriedade	Descrição
consulta de arquivo	fileQuery	A consulta completa ou o caminho para o arquivo a ser recuperado.
ID do usuário	userId	ID do usuário. Esta propriedade é usada para obter o arquivo para um usuário especificado. Também deve fornecer `item-id`, `item-path`, `insight-type` ou `insight-id`.
ID da unidade	driveId	A ID da unidade à qual o arquivo pertence. Também deve fornecer um ou `item-iditem-path`.
ID de grupo	groupId	ID do grupo ao qual o arquivo pertence. Também deve fornecer um ou `item-iditem-path`.
site-id	siteId	ID do site ao qual o arquivo pertence. Também deve fornecer um ou `item-iditem-path`. Forneça o `list-id` também se você estiver fazendo referência a um arquivo de uma lista específica.
list-id	listId	ID da lista à qual o arquivo pertence. Também deve fornecer `site-id` e `item-id`.
item-id	itemID	ID do arquivo. A consulta padrão é `/me/drive/items`. Forneça `drive-id`, `group-id`, `site-id`, ou `user-id` para consultar um local específico.
caminho do item	itemPath	Caminho do item do arquivo. A consulta padrão é `/me/drive/root`. Forneça `drive-id`, `group-id`, `site-id`, ou `user-id` para consultar um local específico.
tipo insight	insightType	Tipo de insight do qual o arquivo é recuperado. Pode ser `trending`, `used`, ou `shared`.
insight-id	insightId	ID do recurso de insight.
Detalhes do arquivo	fileDetails	Definido como um objeto que representa um arquivo
ícone de arquivo	fileIcon	Caminho da URL em que o ícone está armazenado.
-	driveItem	Objeto contendo detalhes do gráfico no item.
-	fileDetails	Objeto que contém o DriveItem.
modo de exibição	modo de exibição	Defina para controlar como o arquivo é renderizado. O padrão é `oneline`. `image` - mostrar apenas o ícone `oneline` - mostrar o ícone e uma linha de texto (o padrão é arquivo `name`) `twolines` - mostrar o ícone e duas linhas de texto (`name` e `lastModifiedDateTime` por padrão) `threelines` - mostrar o ícone e três linhas de texto (`name`, `lastModifiedDateTime`e `displayName` do autor por padrão)
propriedade line1	line1Property	Define a propriedade de `fileDetails` a ser usada para a primeira linha de texto. O padrão é `name` o arquivo.
propriedade line2	line2Property	Define a propriedade de `fileDetails` a ser usada para a segunda linha de texto. O padrão é `lastModifiedDateTime`.
propriedade line3	line3Property	Define a propriedade de `fileDetails` a ser usada para a terceira linha de texto. O padrão é `size` o arquivo.

O exemplo a seguir altera o comportamento do componente para buscar dados de uma consulta específica.

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
</mgt-file>

O exemplo a seguir altera o comportamento do componente para buscar dados de uma consulta específica, mostrar três linhas de informações - nome do arquivo, data e hora da última modificação e tamanho do arquivo por padrão - e definir o ícone de arquivo.

<mgt-file
  file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"
  view="threeLines"
  file-icon="ICON_PATH"
></mgt-file>

O exemplo a seguir altera o comportamento do componente para buscar dados de uma unidade específica.

<mgt-file
  drive-id="b!-RIj2DuyvEyV1T4NlOaMHk8XkS_I8MdFlUCq1BlcjgmhRfAj3-Z8RY2VpuvV_tpd"
  item-id="01BYE5RZ5MYLM2SMX75ZBIPQZIHT6OAYPB"
></mgt-file>

O exemplo a seguir altera o comportamento do componente para buscar dados de um site e caminho do SharePoint.

<mgt-file
  site-id="m365x214355.sharepoint.com,5a58bb09-1fba-41c1-8125-69da264370a0,9f2ec1da-0be4-4a74-9254-973f0add78fd"
  item-Path="/DemoDocs/AdminDemo"
></mgt-file>

O exemplo a seguir altera o comportamento do componente para buscar dados por tipo de insight.

<mgt-file
  insight-type="shared"
  insight-id="AW1GxMvkOztMkJX-SCppUSRPF5EvyPDHRZVAqtQZXI4JoUXwI9_mfEWNlabr1f7aXRBWDMt2C2FDop4fP1vsUw9tRsTL5Ds7TJCV_kgqaVEkBA"
></mgt-file>

Propriedades personalizadas CSS

O mgt-file componente define as seguintes propriedades personalizadas CSS.

<mgt-file class="file" file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2"></mgt-file>

.file {
  --file-type-icon-height: 30px;
  --file-border: 4px dotted #ffbdc3;
  --file-border-radius: 8px;
  --file-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --file-background-color: #e0f8db;
  --file-background-color-focus: yellow;
  --file-background-color-hover: green;
  --file-padding: 8px;
  --file-padding-inline-start: 12px;
  --file-margin: 3px 4px;
  --file-line1-font-size: 15px;
  --file-line1-font-weight: 500;
  --file-line1-color: gray;
  --file-line1-text-transform: capitalize;
  --file-line2-font-size: 14px;
  --file-line2-font-weight: 300;
  --file-line2-color: #e50000;
  --file-line2-text-transform: lowercase;
  --file-line3-font-size: 13px;
  --file-line3-font-weight: 500;
  --file-line3-color: purple;
  --file-line3-text-transform: capitalize;
}

Para saber mais, consulte Componentes de estilo.

APIs e permissões do Microsoft Graph

Esse controle usa as seguintes APIs e permissões do Microsoft Graph. Para cada chamada à API, uma das permissões listadas é necessária.

Configuração	Escopos de Permissão	API
O desenvolvedor fornece `{drive-id}` E `{item-id}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /drives/{drive-id}/items/{item-id}
O desenvolvedor fornece `{drive-id}` E `{item-path}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /drives/{drive-id}/root:/{item-path}
O desenvolvedor fornece `{group-id}` E `{item-id}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /groups/{group-id}/drive/items/{item-id}
O desenvolvedor fornece `{group-id}` E `{item-path}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /groups/{group-id}/drive/root:/{item-path}
O desenvolvedor fornece APENAS `{item-id}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /me/drive/items/{item-id}
O desenvolvedor fornece APENAS `{item-path}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /me/drive/root:/{item-path}
O desenvolvedor fornece `{site-id}` E `{item-id}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /sites/{site-id}/drive/items/{item-id}
O desenvolvedor fornece `{site-id}` E `{item-path}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /sites/{site-id}/drive/root:/{item-path}
O desenvolvedor fornece `{site-id}` E `{list-id}` E `{item-id}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /sites/{site-id}/lists/{list-id}/items/{item-id}/driveItem
O desenvolvedor fornece `{user-id}` E `{item-id}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /users/{user-id}/drive/items/{item-id}
O desenvolvedor fornece `{user-id}` E `{item-path}`	Files. Read, Files. ReadWrite, Files. Read.All, Files. ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	GET /users/{user-id}/drive/root:/{item-path}
`insight-type` está definido como `trending` E o desenvolvedor fornece `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/trending/{insight-id}/resource
`insight-type` está definido como `used` E o desenvolvedor fornece `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/used/{id}/resource (preterido)
`insight-type` é `shared` E o desenvolvedor fornece `{insight-id}`	Sites.Read.All, Sites.ReadWrite.All	GET /me/insights/shared/{id}/resource (preterido)

Modelos

O mgt-file componente suporta vários modelos que permitem substituir certas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores:

Tipo de dados	Contexto de Dados	Descrição
carregando	none	O modelo a ser renderizado enquanto o componente está em um estado de carregamento.
sem dados	none	O modelo a ser renderizado quando nenhum dado de arquivo estiver disponível.
Padrão.	Arquivo: o objeto Detalhes do arquivo	O modelo padrão substitui todo o componente pelo seu.

Exemplo de uso de modelo

<mgt-file file-query="/me/drive/items/01BYE5RZZFWGWWVNHHKVHYXE3OUJHGWCT2">
  <template data-type="default">
    <p>File name: {{file.name}}.</p>
    <p>File ID: {{file.id}}.</p>
  </template>
  <template data-type="loading">
    <p>Getting the file data...</p>
  </template>
  <template data-type="no-data">
    <p>No file data was found</p>
  </template>
</mgt-file>

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação para buscar os dados necessários.

Cache

Loja de objetos	Dados armazenados em cache	Comentários
`driveFiles`	Lista de arquivos por ID da unidade	Usado quando `driveId` é fornecido
`groupFiles`	Lista de arquivos por ID de grupo	Usado quando `groupId` é fornecido
`siteFiles`	Lista de arquivos por ID do site	Usado quando `siteId` é fornecido
`userFiles`	Lista de arquivos por ID de usuário	Usado quando `userId` é fornecido
`insightFiles`	Lista de arquivos por insights	Usados quando `insightType` e `insightId` são fornecidos
`fileQueries`	Lista de arquivos por consultas	Usado quando `fileQuery` é fornecido

Para obter detalhes sobre como configurar o cache, consulte Cache.

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre como configurar a localização, consulte Localizando componentes.

Nome da cadeia de caracteres	Valor padrão
modifiedSubtitle	`Modified`
sizeSubtitle	`Size`

Comentários

Esta página foi útil?

Last updated on 2026-08-24