Subir Fichero en SharePoint Online desde SPFx via JSOM (React + Typescript)

Podemos subir un fichero (Hasta un máximo de 2Mb) desde nuestro Client WebPart en SharePoint Framework a través de JSOM. Para ello debemos añadir un fichero, procesarlo e incluirlo en la librería, siguiendo estos pasos:

Debemos obtener el fichero que queremos subir, ya sea mediante alguna librería de terceros (como dropzone.js) o con un simple input de tipo fichero:

<input type="file" id="uploadFile" />

Podemos obtenerlo así:

var files = (document.getElementById('uploadFile') as HTMLInputElement).files;
var file = files[0];
if (file!=undefined || file!=null){
     //Here we have the file
}

Una vez tenemos el fichero, debemos crear un objeto de tipo “FileCreationInformation” que contendra toda la información para subirla a la librería.

let fci = new SP.FileCreationInformation();
fci.set_url(file.name);
fci.set_overwrite(true);

Para poder procesar el contenido del fichero debemos convertirlo a un array de bytes en base64.

let fr = new FileReader();
fr.onload=function() {
     letarrayBuffer= (this.resultasArrayBuffer);
     let binary='';
     let bytes=newUint8Array(arrayBuffer);
     for(let i=0; i<bytes.byteLength; i++) {
          binary+=String.fromCharCode(bytes[i]);
     }
     let content=newSP.Base64EncodedByteArray(btoa(binary));
     fci.set_content(content);
     //Here we have the FileCreationInformation ready to be uploaded
}
fr.readAsArrayBuffer(file);

Una vez tenemos todos los datos necesarios, tan solo debemos acceder a la librería y añadir el nuevo fichero.

let docs: SP.List = ctx.get_web().get_lists().getByTitle(listTitle);
let fileToUpload = docs.get_rootFolder().get_files().add(fci);
ctx.load(fileToUpload);
ctx.executeQueryAsync((sender, args) => {
     resolve();
}, (sender, args) => {
     reject(args);
});

Tras subir el fichero podemos retornar la URL del mismo.

resolve(fileToUpload.get_serverRelativeUrl());

La función completa sería:

public static uploadFile(file: File, listTitle: string) : Promise {
    return new Promise((resolve, reject) => {
        let ctx = SP.ClientContext.get_current();
        let fci = new SP.FileCreationInformation();
        fci.set_url(file.name);
        fci.set_overwrite(true);
        let fr = new FileReader();
        fr.onload = function() {
            let arrayBuffer = (this.result as ArrayBuffer);
            let binary = '';
            let bytes = new Uint8Array(arrayBuffer);
            for(let i = 0; i < bytes.byteLength; i++) { 
                 binary += String.fromCharCode(bytes[i]); 
            } 
            let content = new SP.Base64EncodedByteArray(btoa(binary)); 
            fci.set_content(content); 
            let docs: SP.List = ctx.get_web().get_lists().getByTitle(listTitle); 
            let fileToUpload = docs.get_rootFolder().get_files().add(fci); 
            ctx.load(fileToUpload); 
            ctx.executeQueryAsync((sender, args) => {
                resolve(fileToUpload.get_serverRelativeUrl());
            }, (sender, args) => {
                reject(args);
            });
        }
        fr.readAsArrayBuffer(file);        
    });
}

Esta función os permitirá subir ficheros al Root Folder de la librería, si queréis subirlos dentro de una carpeta (o una estructura de carpetas) podéis verlo en el siguiente post: Subir Fichero a una Carpeta en SharePoint Online desde SPFx (React + Typescript)

Nota: Para poder utilizar JSOM en nuestra solucion SPFx debemos incluir las librerias como externas. Paso a paso en la documentación de Microsoft: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom