Compartir a través de

Guardar archivos con el SDK del selector de archivos de OneDrive para JavaScript v7.2

  • Artículo

Para guardar archivos desde OneDrive, la aplicación debe proporcionar un botón para iniciar mediante programación la experiencia del selector de OneDrive.

1. Registrar la aplicación

Para usar el selector de OneDrive, debe registrar la aplicación a través de la página de registros de App de Azure y recibir un identificador de aplicación. También debe agregar un URI de redireccionamiento válido para la aplicación web mediante el selector. Este puede ser la página que hospeda el SDK del selector o una dirección URL personalizada que defina. Para obtener más información, vea Configuración.

2. Agregar una referencia al SDK

Inserte el SDK de OneDrive para JavaScript en la página.

<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>

3. Iniciar el selector de archivos

Para guardar archivos en OneDrive, la aplicación debe proporcionar un botón para abrir mediante programación el selector de archivos de OneDrive. Como este código iniciará una ventana emergente en el explorador, necesita llamarse como parte de una acción de usuario explícita para evitar que se bloquee mediante un bloqueador de elementos emergentes.

Como parte del método OneDrive.save(...), especifique las opciones de cómo debe comportarse el selector y cómo volverá a llamar a su código mediante un objeto de opciones.

<script type="text/javascript">
  function launchSaveToOneDrive(){
    var odOptions = { /* ... specify the desired options ... */ };
    OneDrive.save(odOptions);
  }
</script>

<input id="fileUploadControl" name="fileUploadControl" type="file" />
<button onclick="launchSaveToOneDrive">Save to OneDrive</button>

Opciones del selector

Puede especificar cómo se comporta el selector de archivos al guardar archivos proporcionando un objeto con parámetros que controlen el comportamiento del selector. Este objeto también incluye las funciones de devolución de llamada cuando el selector de archivos ha finalizado o detecta un error.

Ejemplo de la opciones del selector de archivos

var odOptions = {
  clientId: "INSERT-APP-ID-HERE",
  action: "save",
  sourceInputElementId: "fileUploadControl",
  sourceUri: "",
  fileName: "file.txt",
  openInNewWindow: true,
  advanced: {},
  success: function(files) { /* success handler */ },
  progress: function(percent) { /* progress handler */ },
  cancel: function() { /* cancel handler */ },
  error: function(error) { /* error handler */ }
}

Parámetros

Nombre del parámetro Descripción
clientId El id. de aplicación que se ha generado mediante la consola de registro de aplicaciones para su integración.
action El tipo de acción que se realiza con los archivos seleccionados. Puede especificar save para guardar un archivo directamente en OneDrive, o query para devolver identificadores que puedan usarse con la API de Microsoft Graph o la API de OneDrive para guardar en una carpeta seleccionada.
sourceInputElementId El id. de elemento de entrada de formulario (tipo=archivo) del archivo que se va a cargar.
sourceUri Un URI de datos, HTTPS o HTTP del archivo que se va a cargar. OneDrive para la Empresa y SharePoint solo admiten valores de URI de datos.
fileName Necesario si el parámetro sourceUri es un URI de datos. Si no se proporciona, el nombre de archivo se deducirá del atributo de nombre del elemento de entrada.
openInNewWindow El valor predeterminado es True, que abre la experiencia de selección de OneDrive en una ventana emergente. False abre la experiencia de selección de OneDrive en la misma ventana.
viewType El tipo de elemento que se puede seleccionar. El valor predeterminado es files. Puede especificar folders para limitar la selección a solo carpetas o especificar all que permite la selección de ambos archivos y carpetas.
accountSwitchEnabled El valor predeterminado es true, que representa la interfaz de usuario "Cambiar cuenta" en la página hospedada de Selector de archivos.
advanced Una colección de propiedades adicionales que pueden personalizar el comportamiento del selector, pero no son necesarias para la mayoría de los escenarios. Vea Escenarios de guardado avanzados para obtener más información.
nameConflictBehavior Un parámetro opcional que se ha pasado para la situación en la que un archivo que se está cargando tiene un conflicto de nombre con el archivo de la carpeta de destino. Vea la definición de parámetros para obtener más información.
success Se llama cuando se completa la carga del archivo en el servidor. El parámetro de archivos es una colección de metadatos devueltos por el servicio para el archivo cargado.
progress Se llama en diversos puntos con un float entre 0,0 y 100,0 para indicar el progreso de la carga. Se llama al menos una vez con 100,0.
cancel Se llama cuando el usuario cancela el protector.
error Se llama cuando se ha producido un error en el servidor, cuando el usuario está fuera de la cuota, cuando el usuario no tiene permiso para cargar en la ubicación seleccionada o cuando el usuario no ha seleccionado un archivo para cargarse.

Nota: Si openInNewWindow es false, entonces todas las funciones de devolución de llamada deben declararse globalmente en la página antes de que se haga referencia al SDK para garantizar que se llamará a las funciones. Cuando los nombres de función de devolución de llamada se registran globalmente se cambia su nombre con un prefijo oneDriveFilePicker. Por ejemplo, success se convierte en oneDriveFilePickerSuccess.

Tipos de acciones

Con el parámetro action del SDK del selector puede especificar cómo se comporta el selector. Se permiten los siguientes valores para la acción save():

Valor Descripción
save Guarda el archivo proporcionado por sourceInputElementId o sourceUri en la carpeta seleccionada en OneDrive del usuario.
query Devuelve metadatos de API sobre la carpeta seleccionada. Después, la aplicación carga uno o más archivos en la carpeta seleccionada por el usuario.

4. Controlar el objeto de respuesta del selector

Cuando el usuario haya terminado de seleccionar los archivos, la devolución de llamada success recibe un objeto response. Este objeto contiene propiedades, incluida la propiedad value que es una colección de recursos Item con un subconjunto de las propiedades del elemento.

Al usar la acción save, esta colección proporciona los metadatos de elemento para el archivo que se acaba de cargar. Para la acción query, esta colección contendrá metadatos para la carpeta seleccionada.

Ejemplo al cargar un documento

{
  "value": [
    {
      "id": "123456",
      "name": "document1.docx",
      "size": 12340,
      "@content.downloadUrl": "https://contoso-my.sharepoint.com/download.aspx?guid=1231231231a",
      "webUrl": "https://cotoso-my.sharepoint.com/personal/user_contoso_com/documents/document1.docx",
      "thumbnails": [
        {
          "id": "0",
          "small": { "url": "https://sn3302files.onedrive.live.com/..." },
          "medium": { "url": "https://sn3302files.onedrive.live.com/..." },
          "large": { "url": "https://sn3302files.onedrive.live.com/..." }
        }
      ]
    }
  ]
}

Ejemplo al usar query para guardar en una carpeta

{
  "value": [
    {
      "id": "1234567!12",
      "name": "Project Vroom",
      "webUrl": "https://cotoso-my.sharepoint.com/personal/user_contoso_com/documents/project%20vroom",
      "folder": { "childCount": 4 }
    }
  ]
}

Escenarios de guardado avanzados

El parámetro avanzado del objeto de opciones tiene las siguientes propiedades definidas:

Nombre del parámetro Descripción
redirectUri De manera predeterminada, el selector usa la página desde la que se ha iniciado como el URI de redireccionamiento para la autenticación. Esto puede no ser adecuado en todos los escenarios, por lo que puede establecer una dirección URL personalizada para usarse en su lugar. Esta URL debe estar en el mismo dominio raíz y usar el mismo protocolo que la página que hospeda el SDK del selector. La página de destino debe hacer referencia al SDK del selector de OneDrive de la misma manera que la página de llamada.

Usar un URI de redireccionamiento personalizado

Si la aplicación es una aplicación de JavaScript del lado cliente grande o usa parámetros de cadena de consulta para conservar el estado, puede que no sea adecuado usar la página para iniciar el selector de archivos como el URI de redireccionamiento. Esto requiere que la aplicación entera se vuelva a cargar dentro de la ventana emergente, lo que puede ocasionar problemas de rendimiento. Puede especificar un URI de redireccionamiento alternativo mediante el objeto avanzado que se usa en su lugar.

var odOptions = {
  clientId: "INSERT-APP-ID-HERE",
  action: "download",
  openInNewWindow: true,
  advanced: {
    redirectUri: "https://contoso.com/filePickerRedirect.htm"
  },
  success: function(files) { /* success handler */ },
  cancel: function() { /* cancel handler */ },
  error: function(error) { /* error handler */ }
}

La página a la que se redirige solo necesita cargar el script del SDK de OneDrive:

<html>
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
</html>

Nota: Solo puede proporcionar un URI de redireccionamiento personalizado al usar el selector de archivos como una ventana emergente (openInNewWindow es true). Al usar la experiencia en línea, siempre se usa el URI de redireccionamiento predeterminado.