Esercitazione: Caricamento di file in OneDrive

Completato

Ecco la procedura per aggiungere una funzionalità di caricamento all'app.

Visualizzare un elemento di input del browser e un gestore eventi per il caricamento

1. Aprire il file index.html.

2. Individuare la riga <ul id="downloadLinks"></ul> e aggiungere il commento seguente subito dopo:

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

   Il blocco di contenuto <div> risultante dovrebbe essere simile al seguente:

   <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. Aprire ora il file ui.js nell'editor di codice e aggiungere il codice seguente alla fine del file:

   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;
   }
   

Aggiungere una funzione per caricare il file usando l'SDK di Microsoft Graph

1. Nell'editor di codice, aprire il file graph.js.

2. Aggiungere questa funzionalità alla fine del file:

   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. Assicurarsi di salvare il file graph.js prima di continuare.

Eseguire l'app

Aggiornare il browser. Quando si accede, viene visualizzato un pulsante di caricamento.

Selezionare il pulsante e scegliere un file dal computer. La prima volta che si effettua il caricamento, viene visualizzata una nuova finestra popup di consenso in cui viene richiesta l'autorizzazione per scrivere e leggere i file. Quando il file inizia il caricamento, viene visualizzato un messaggio.

La prima volta che si esegue questa operazione, viene visualizzata un'altra finestra popup di consenso perché ora si sta chiedendo di scrivere i file.

Al termine del caricamento, il messaggio mostra il numero di byte caricati e il file viene visualizzato nell'elenco dei file.

Arrestare il server Node.js selezionandoCTRL+C nella finestra del terminale.