Componente de lista de archivos en microsoft Graph Toolkit

El componente Lista de archivos muestra una lista de varias carpetas y archivos mediante el nombre de archivo o carpeta, un icono y otras propiedades que especifique. Este componente usa el componente mgt-file. Puede especificar una unidad o un sitio específicos, mostrar una lista de archivos según el tipo de información (tendencias, usar o compartir) o proporcionar consultas a una lista personalizada de archivos. El componente también proporciona la opción de permitir a los usuarios cargar archivos en una ubicación especificada en One Drive o SharePoint.

Ejemplo

En el ejemplo siguiente se muestra un archivo con el mgt-file-list componente. Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

Abra este ejemplo en mgt.dev

Propiedades

Puede usar varias propiedades para personalizar el componente.

Atributo Propiedad Descripción
file-list-query fileListQuery Consulta completa o ruta de acceso a la unidad o sitio que contiene la lista de archivos que se va a representar.
consultas de archivos fileQueries Una matriz de consultas de archivo que representará el componente.
ninguno archivos Una matriz de archivos para obtener o establecer la lista de archivos representados por el componente. Use esta opción para obtener acceso a los archivos cargados por el componente. Establezca este valor para cargar sus propios archivos.
insight-type insightType Se establece para mostrar los archivos de tendencias, usados o compartidos del usuario.
drive-id driveId Id. de la unidad a la que pertenece la carpeta. También debe proporcionar o item-id item-path .
group-id groupId Id. del grupo al que pertenece la carpeta. También debe proporcionar o item-id item-path .
site-id siteId Id. del sitio al que pertenece la carpeta. También debe proporcionar o {item-id} {item-path} . Proporcione {list-id} si hace referencia a un archivo de una lista específica.
item-id itemId Id. de la carpeta. La consulta predeterminada es /me/drive/items . Proporcione {drive-id} , , o para consultar una ubicación {group-id} {site-id} {user-id} específica.
item-path itemPath Ruta de acceso de elemento de la carpeta (relativa a la raíz). La consulta predeterminada es /me/drive/root . Proporcione {drive-id} , , o para consultar una ubicación {group-id} {site-id} {user-id} específica.
page-size pageSize Valor de número para indicar el número máximo de archivos que se representará en cada página. Nota: page-size no se admite con insight-type .
extensiones de archivo fileExtensions Una matriz de extensiones de archivo usadas para filtrar los archivos que se mostrarán.
hide-more-files-button hideMoreFilesButton Boolean para indicar si se va a mostrar un botón para representar más archivos.
enable-file-upload enableFileUpload Boolean para habilitar o deshabilitar la funcionalidad de carga de archivos. El valor predeterminado es false.
excluded-file-extensions excludedFileExtensions Matriz de cadenas de extensiones de archivo que se excluirán de la carga de archivos. También debe establecer el enable-file-upload atributo en true .
max-file-size maxFileSize Un número que representa el tamaño máximo de carga de archivos (KB). También debe establecer el enable-file-upload atributo en true .
max-upload-file maxUploadFile Un número que representa el número máximo de archivos permitidos para cargarse. El valor predeterminado son 10 los archivos. También debe establecer el enable-file-upload atributo en true .

En el ejemplo siguiente se cambia el comportamiento del componente para capturar una lista de archivos de una consulta específica.

<mgt-file-list file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar una lista de archivos de una carpeta proporcionando el identificador de carpeta.

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar la lista de archivos de un grupo proporcionando el id. de grupo y la ruta de carpeta.

<mgt-file-list group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3" item-path="/Design"></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar la lista de archivos de un usuario proporcionando el identificador de usuario y el identificador de carpeta.

<mgt-file-list user-id="48d31887-5fad-4d73-a9f5-3c356e68a038" item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"></mgt-file-list>

En el ejemplo siguiente se cambia el comportamiento del componente para capturar la lista de archivos proporcionando el tipo de información.

<mgt-file-list insight-type="shared"></mgt-file-list>

En el siguiente ejemplo se habilita la característica de carga de archivos.

<mgt-file-list enable-file-upload></mgt-file-list>

En el ejemplo siguiente se limita a 5 el número máximo de archivos que se pueden cargar.

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

En el ejemplo siguiente se limita el tamaño máximo de archivo que se puede cargar a 10000 KB.

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

En el siguiente ejemplo se excluye la carga de archivos con extensiones de archivo ".doc,.pdf".

<mgt-file-list excluded-file-extensions=".doc,.pdf" enable-file-upload></mgt-file-list>

Métodos

Método Descripción
reload(clearCache = false) Llame al método para volver a cargar el componente con posibles nuevos datos en función de sus propiedades. Pase true para borrar la memoria caché antes de volver a cargar.

Propiedades personalizadas css

El mgt-file-list componente define las siguientes propiedades personalizadas css.

mgt-file-list {
  --font-family: 'Segoe UI';
  --font-size: 14px;

  --file-list-background-color: #ffffff;
  --file-list-border: none;
  --file-list-box-shadow: none;
  --file-list-padding: 4px 0;
  --file-list-margin: 0;

  --file-item-background-color--hover: rgba(0, 0, 0, 0.1);
  --file-item-background-color--active: rgba(0, 0, 0, 0.05);
  --file-item-border-radius: 2px;
  --file-item-margin: 0 4px;

  --file-item-border-top: none;
  --file-item-border-left: none;
  --file-item-border-right: none;
  --file-item-border-bottom: none;

  --show-more-button-background-color: #f3f2f1;
  --show-more-button-background-color--hover: rgba(0, 0, 0, 0.1);
  --show-more-button-font-size: 12px;
  --show-more-button-padding: 6px;
  --show-more-button-border-bottom-right-radius: 4px;
  --show-more-button-border-bottom-left-radius: 4px;

  --file-upload-border: 4px dotted #ffbdc3;
  --file-upload-background-color: rgba(255, 0, 0, 0.1);
  --file-upload-button-float: left;
  --file-upload-button-color: #323130;
  --file-upload-button-background-color: #fef8dd;
  --file-upload-dialog-content-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-color: #323130;
}

Para obtener más información, consulte styling components.

Microsoft Graph API y permisos

Configuración Permisos API
Valor predeterminado (no se proporcionan identificadores ni consulta) Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/root/children
Proporcionar enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /me/drive/root/children
PUT /me/drive/root:/{filename}:/content
POST /me/drive/root:/{filename}:/createUploadSession
Proporcionar {drive-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /drives/{drive-id}/items/{item-id}/children
Proporcionar {drive-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /drives/{drive-id}/items/{item-id}/children
PUT /drives/{drive-id}/items/{item-id}:/{filename}:/content
POST /drives/{drive-id}/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {group-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /groups/{group-id}/drive/items/{item-id}/children
Proporcionar {group-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /groups/{group-id}/drive/items/{item-id}/children
PUT /groups/{group-id}/drive/items/{item-id}:/{filename}:/content
POST /groups/{group-id}/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar SOLO {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/items/{item-id}/children
Proporcionar SOLO {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /me/drive/items/{item-id}/children
PUT /me/drive/items/{item-id}:/{filename}:/content
POST /me/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {site-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/drive/items/{item-id}/children
Proporcionar {site-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /sites/{site-id}/drive/items/{item-id}/children
PUT /sites/{site-id}/drive/items/{item-id}:/{filename}:/content
POST /sites/{site-id}/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {user-id} AND {item-id} Files.Read, Files.Read.All, Sites.Read.All GET /users/{user-id}/drive/items/{item-id}/children
Proporcionar {user-id} AND {item-id} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /users/{user-id}/drive/items/{item-id}/children
PUT /users/{user-id}/drive/items/{item-id}:/{filename}:/content
POST /users/{user-id}/drive/items/{item-id}:/{filename}:/createUploadSession
Proporcionar {drive-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /drives/{drive-id}/root:/{item-path}:/children
Proporcionar {drive-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /drives/{drive-id}/root:/{item-path}:/children
PUT /drives/{drive-id}/root:/{item-path}/{filename}:/content
POST /drives/{drive-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar {group-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /groups/{group-id}/root:/{item-path}:/children
Proporcionar {group-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /groups/{group-id}/root:/{item-path}:/children
PUT /groups/{group-id}/root:/{item-path}/{filename}:/content
POST /groups/{group-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar {site-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /sites/{site-id}/root:/{item-path}:/children
Proporcionar {site-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /sites/{site-id}/root:/{item-path}:/children
PUT /sites/{site-id}/root:/{item-path}/{filename}:/content
POST /sites/{site-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar {user-id} AND {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /users/{user-id}/root:/{item-path}:/children
Proporcionar {user-id} AND {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /users/{user-id}/root:/{item-path}:/children
PUT /users/{user-id}/root:/{item-path}/{filename}:/content
POST /users/{user-id}/root:/{item-path}/{filename}:/createUploadSession
Proporcionar solo {item-path} Files.Read, Files.Read.All, Sites.Read.All GET /me/drive/root:/{item-path}:/children
Proporcionar solo {item-path} AND enable-file-upload Files.Read, Files.Read.All, Sites.Read.All, Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All GET /me/drive/root:/{item-path}:/children
PUT /me/drive/root:/{item-path}/{filename}:/content
POST /me/drive/root:/{item-path}/{filename}:/createUploadSession
insight-type se establece en tendencia Sites.Read.All GET /me/insights/trending
Proporcionar {user-id or upn} Y se establece insight-type en trending Sites.Read.All GET /users/{id or userPrincipalName}/insights/trending
insight-type se establece en used Sites.Read.All GET /me/insights/used
Proporcionar {user-id or upn} Y se establece insight-type en used Sites.Read.All GET /users/{id or userPrincipalName}/insights/used
insight-type se establece en compartido Sites.Read.All GET /me/insights/shared
Proporcionar {user-id or upn} Y se establece insight-type en shared Sites.Read.All GET /users/{id or userPrincipalName}/insights/shared?$filter=((lastshared/sharedby/id eq '${user-id}') and (resourceReference/type eq 'microsoft.graph.driveItem'))

Events

Evento Cuándo se emite Datos personalizados Cancelable Burbujas Funciona con plantilla personalizada
itemClick Se desencadena cuando el usuario hace clic en un archivo. Archivo seleccionado No No Sí, con plantilla de archivo personalizada

Para obtener más información acerca del control de eventos, vea eventos.

Plantillas

El mgt-file-list componente admite varias plantillas que permiten reemplazar determinadas partes del componente. Para especificar una plantilla, incluya un elemento dentro de un componente y establezca el valor en uno de los <template> data-type tipos de datos enumerados en la tabla siguiente.

Tipo de datos Contexto de datos Descripción
Es el valor predeterminado. files: lista de objetos de archivo La plantilla predeterminada reemplaza todo el componente por el suyo propio.
archivo file: objeto file Plantilla usada para representar cada archivo.
sin datos No se pasa ningún contexto de datos Plantilla que se usa cuando no hay datos disponibles.
carga No se pasa ningún contexto de datos Plantilla usada mientras el componente carga el estado.

Autenticación

El control usa el proveedor de autenticación global descrito en la documentación de autenticación para capturar los datos necesarios.

Caché

Almacén de objetos Datos almacenados en caché Comentarios
fileLists Lista de listas de archivos Lista de caché predeterminada para almacenar listas de archivos.
insightfileLists Lista de listas de archivos de información Se usa cuando insightType se proporciona.

Nota

El mgt-file-list componente también usa el almacén de objetos de fileQueries mgt-file IndexedDB para almacenar en caché los archivos cuando se fileQueries proporciona.

Para obtener más información sobre cómo configurar la memoria caché, vea Caching.