Exercice : afficher les fichiers des utilisateurs

Effectué

Dans cet exercice, vous allez étendre l’application pour afficher la liste des fichiers du dossier racine de l’utilisateur dans OneDrive Entreprise.

Obtenir la liste des fichiers

Commencez par ajouter l’appel Microsoft Graph à l’application.

1. Dans votre éditeur de code. ouvrez le fichier graph.js.

2. À la fin du fichier, ajoutez une nouvelle fonction async nommée getFiles() pour récupérer la liste des fichiers. Utilisez la fonction Sélection pour récupérer les propriétés id, name, folder, et package pour chaque fichier.

   // Get files in root of user's OneDrive
   async function getFiles() {
     ensureScope('files.read');
     try {
       const response = await graphClient
           .api('/me/drive/root/children')
           .select('id,name,folder,package')
           .get();
       return response.value;
     } catch (error) {
       console.error(error);
     }
   }
   

Ajouter un espace réservé HTML pour afficher les fichiers

Ajoutez ensuite le code HTML qui affiche la liste des fichiers.

1. Dans votre éditeur de code, ouvrez le fichier index.html.

2. Étendez le bloc content avec une règle horizontale, une étiquette et une liste non ordonnée, comme suit :

   <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>
   </div>
   

Afficher des fichiers dans l’application

La dernière étape consiste à ajouter une petite quantité de code pour appeler la fonction que vous avez ajoutée précédemment et afficher la liste des fichiers.

1. Dans votre éditeur de code, ouvrez le fichier ui.js.

2. À la fin du fichier, ajoutez la fonction displayFiles().

   async function displayFiles() {
     const files = await getFiles();
     const ul = document.getElementById('downloadLinks');
     while (ul.firstChild) {
       ul.removeChild(ul.firstChild);
     }
     for (let file of files) {
       if (!file.folder && !file.package) {
         let a = document.createElement('a');
         a.href = '#';
         a.appendChild(document.createTextNode(file.name));
         let li = document.createElement('li');
         li.appendChild(a);
         ul.appendChild(li);
       }
     }
   }
   

   Notez que instruction if ignore tous les dossiers ou packages pour afficher uniquement les fichiers. Il n’est pas possible de filtrer ceux-ci dans l’API pour le moment. Notez également que les fichiers sont rendus comme des balises d’ancre (liens hypertexte). Dans l'exercice suivant, vous ajouterez une fonctionnalité permettant de télécharger chaque fichier lorsque ce lien est sélectionné.

3. À la fin de la fonction displayUI() , juste devant l’accolade fermant, ajoutez un appel à displayFiles().

     // beginning of function omitted for brevity
     content.style = "display: block";
   
     displayFiles();
   }
   

Exécuter votre application

Vous avez à présent étendu votre application pour afficher certains fichiers de l’utilisateur à l’aide de Microsoft Graph. Assurez-vous qu'il y a des fichiers dans le dossier racine de l'instance OneDrive de l'utilisateur, puis exécutez l'application localement.

1. Affichez un aperçu de l’application web en exécutant la commande suivante dans le terminal :

   npm start
   

2. Votre navigateur par défaut doit s’ouvrir et pointer vers http://localhost:8080.

3. Sélectionnez Se connecter avec Microsoft pour vous connecter avec votre compte Microsoft 365.

4. Si vous exécutez l’application pour la première fois, vous devrez, à l’invite, autoriser l’accès de l’application à vos fichiers. Pour continuer, acceptez la demande.

   

5. La liste des fichiers doit s’afficher.

   

6. Maintenez votre serveur Node.js en exécution, car vous l’utiliserez au cours de la prochaine partie de l’exercice.