[SharePoint 2013] Subiendo ficheros usando la API REST mediante HTML5 y JavaScript

Una de las grandes novedades que trae SharePoint 2013 es que esta basado en los estándares web: Oauth, Odata, HTML5, JavaScript, API REST, etc.. Lo cual va a tener dos consecuencias: mayor número de desarrolladores sobre SharePoint y reciclaje de los desarrolladores «tradicionales» para adaptarse a estos estándares.
En este post vamos a ver cómo podemos subir un fichero a una biblioteca de SharePoint utilizando HTML5 y JavaScript.

Acceso al Fichero

Hace unos días tuve la necesidad de implementar la subida de un fichero a una biblioteca alojada en una App de SharePoint. Mi primer pensamiento está claro: cómo podemos hacer uso de los ficheros que tenemos en nuestro PC utilizando JavaScript. Pero aquí es donde me quedo con la boca abierta, y es que, haciendo uso de HTML5 se puede manejar de una forma muy fácil los ficheros. Para ello hacemos uso de la API File incluida en HTML5 y si añadimos estas lineas tenemos acceso al fichero:

var fileInput = $('#fileSelectorInput')[0];
var reader = new FileReader();
reader.onload = function (result) {
    var fileData = '';
    var byteArray = new Uint8Array(result.target.result)
    for (var i = 0; i < byteArray.byteLength; i++) {
        fileData += String.fromCharCode(byteArray[i])
    }
};
reader.readAsArrayBuffer(fileInput.files[0]);

Este código obtiene la ruta que se ha introducido dentro de «div» del HTML5 y lo transforma en un Array de Bytes. Esto solamente es una pequeña parte de lo que se puede hacer con los ficheros haciendo uso de la API File incluida en el estándar HTML5. Desde el típico selector de ficheros, pasando por el Drag and drop (solar y arrastar) y terminando por una previsualización del fichero, son opciones que se pueden desarrollar de una manera muy simple. Si queréis más información podéis echarle un ojo a este link.

Llamada API REST

Una vez ya sabemos cómo obtener el fichero, el siguiente paso que tenemos que hacer es hacer la llamada API REST a SharePoint para almacenar este fichero. Para ello, en primer lugar tenemos que construir la URL que tiene una estructura como la siguiente:

 var url = appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle(@TargetLibrary)/RootFolder/folders(@TargetFolderName)/files/add(url=@TargetFileName,overwrite='true')?" +
           "@TargetSite='" + targetSiteUrl + "'" +
           "&@TargetLibrary='" + libraryName + "'" +
           "&@TargetFolderName='" + folderName + "'" +
           "&@TargetFileName='" + fileName + "'";

Donde los parametos que se le pasan son :

• AppWebUrl: la url de la APP (se obtiene de la QueryString)
• TagetSite: Sitio donde se encuentra el sitio donde esta la Biblioteca
• TargetLibrary: Nombre de la Biblioteca
• TargetFolderName: Nombre de la Carpeta dentro de la biblioteca (Este parametro es opcional)
• TargetFileName: Nombre del Fichero

Finalmente el último paso que nos quedaría seria realizar la llamada API REST con el siguiente código:

 // use the request executor (cross domain library) to perform the upload
    var reqExecutor = new SP.RequestExecutor(appWebUrl);
    reqExecutor.executeAsync({
        url: url,
        method: "POST",
        headers: {
            "Accept": "application/json; odata=verbose",
            "X-RequestDigest": digest
        },
        contentType: "application/json;odata=verbose",
        binaryStringRequestBody: true,
        body: fileData,
        success: function (x, y, z) {
            alert("Success! Your file was uploaded to SharePoint.");
        },
        error: function (x, y, z) {
            alert("Oooooops... it looks like something went wrong uploading your file.");
        }
    });

El motivo de introducir la llamada dentro de un «Executor» o llamadas entre dominios es permitir que se puedan seleccionar bibliotecas independientemente de su ubicación, es decir, si solo queremos almacenar ficheros en nuestra APP, se puede realizar la llamada directamente sin hacer uso de esta librería.

De la llamada a la API Rest es interesante comentar los siguientes parámetros:

• «binaryStringRequestBody» en el que se indica que el cuerpo de la llamada es un fichero binario, en caso de no indicarlo, SharePoint nos rechazará la petición.
• «Content Lenght» especificaremos el tamaño del archivo que vamos a enviar. De no incluirlo, SharePoint nos denegará la petición, a no ser que lo hagamos en una llamada dentro de un Executor (como es el caso)

Para obtener todas las  particularidades para hacer el envio de un fichero revisar el siguiente artículo de MSDN

Conclusión

En este post nos hemos quitado un poco los miedos de hacer uso de una forma de desarrollar un tanto desconocida, pero que tiene muchas ventajas, muchas cualidades, y eso que ahora mismo solamente conocemos un 10% de toda su capacidad y de todos los beneficios que nos trae.

De momento, lo único malo que tiene es su visualización en navegadores,  ya que estas opciones que incorpora HTML5 solo son compatibles con IE10, Chrome versión 7 y Firefox versión 3.6. Sin embargo, lo bueno es que todos los dispositivos móviles hacen uso de uno de estos navegadores por eso solamente volvemos a la guerra de los navegadores en un equipo de sobremesa.

Si os interesa, podéis descargar el ejemplo descrito.