Ejercicio: Carga de archivos de usuario

Completado

Estos son los pasos para agregar una característica de carga a la aplicación.

Mostrar un elemento de entrada del explorador y un controlador de eventos para la carga

1. Abra el archivo index.html.

2. Localice la línea <ul id="downloadLinks"></ul> y añada la siguiente revisión inmediatamente después de ella:

   <!-- Add for file upload -->
   <hr />
   <input type="file" onchange="fileSelected(this);" />
   <div id="uploadMessage"></div>
   

   El bloque de contenido <div> resultante debe tener un aspecto similar al siguiente:

   <div id="content" style="display: none;">
     <h4>Welcome <span id="userName"></span></h4>
     <!-- Add for file download -->
     <hr />
     <label>Files in your OneDrive root folder:</label>
     <ul id="downloadLinks"></ul>
     <!-- Add for file upload -->
     <hr />
     <input type="file" onchange="fileSelected(this);" />
     <div id="uploadMessage"></div>
   </div>
   

3. Ahora, abra el archivo ui.js en el editor de código y agregue el código siguiente al final del archivo:

   function fileSelected(e) {
     displayUploadMessage(`Uploading ${e.files[0].name}...`);
     uploadFile(e.files[0])
     .then((response) => {
       displayUploadMessage(`File ${response.name} of ${response.size} bytes uploaded`);
       displayFiles();
     });
   }
   
   function displayUploadMessage(message) {
       const messageElement = document.getElementById('uploadMessage');
       messageElement.innerText = message;
   }
   

Agregar una función para cargar el archivo mediante el SDK de Microsoft Graph

1. Abra el archivo graph.js en el editor de código.

2. Agregue esta función en la parte inferior del archivo:

   async function uploadFile(file) {
     try {
       ensureScope('files.readwrite');
       let options = {
           path: "/",
           fileName: file.name,
           rangeSize: 1024 * 1024 // must be a multiple of 320 KiB
       };
       const uploadTask = await MicrosoftGraph.OneDriveLargeFileUploadTask
           .create(graphClient, file, options);
       const response = await uploadTask.upload();
       console.log(`File ${response.name} of ${response.size} bytes uploaded`);
       return response;
     } catch (error) {
       console.error(error);
     }
   }
   

3. Asegúrese de guardar el archivograph.js antes de continuar.

Ejecutar la aplicación

Actualice el explorador. Al iniciar sesión, debería ver un botón de carga.

Seleccione el botón y elija un archivo del equipo. Es posible que observe que la primera vez que cargue verá una nueva ventana emergente de consentimiento que solicita permiso para escribir y leer archivos. Cuando el archivo comienza a cargarse, aparece un mensaje.

La primera vez que lo haga, verá otra ventana emergente de consentimiento porque ahora le pide que escriba archivos.

Una vez completada la carga, el mensaje muestra el número de bytes cargados y el archivo aparece en la lista de archivos.

Detenga el servidor node.js seleccionando CTRL+C en la ventana de terminal.