Exercício – Exibir arquivos de usuário

Concluído

Neste exercício, você estenderá o aplicativo para exibir uma lista de arquivos na pasta raiz do usuário no OneDrive for Business.

Obter a lista de arquivos

Comece adicionando a chamada do Microsoft Graph ao aplicativo.

1. No editor de código, abra o arquivo auth.js.

2. No final do arquivo, adicione uma nova função assíncrona chamada getFiles() recuperar a lista de arquivos. Use a função select para recuperar as propriedades id, name, foldere package para cada arquivo.

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

Adicionar um espaço reservado HTML para mostrar os arquivos

Em seguida, adicione HTML que exibirá a lista de arquivos.

1. No editor de código, abra o arquivo index.html.

2. Estenda o bloco content com uma régua horizontal, rótulo e lista não ordenada, da seguinte maneira:

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

Exibir arquivos no aplicativo

A última etapa é adicionar uma pequena quantidade de código para chamar a função que você adicionou anteriormente e exibir a lista de arquivos.

1. No editor de código, abra o arquivo auth.js.

2. No final do arquivo, adicione a função displayFiles() usuário.

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

   Observe que a instrução if ignora todas as pastas ou pacotes para mostrar apenas os arquivos. Não é possível filtrar esses itens na API no momento. Observe também que os arquivos são renderizados como marcas de âncora (hiperlinks). No próximo exercício, você adicionará um recurso para baixar cada arquivo quando esse link for selecionado.

3. No final da função displayUI(), logo antes da chave de fechamento, adicione uma chamada para displayFiles().

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

Execute seu aplicativo

Agora você estendeu seu aplicativo para mostrar alguns dos arquivos do usuário usando o Microsoft Graph. Verifique se há alguns arquivos na pasta raiz da instância do usuário do OneDrive e execute o aplicativo localmente.

1. Visualize o aplicativo da Web executando o seguinte comando no terminal:

   npm start
   

2. Seu navegador deve apontar para http://localhost:8080.

3. Selecione o botão Entrar com a Microsoft para entrar com sua conta do Microsoft 365.

4. Se você estiver executando o aplicativo pela primeira vez, será solicitado que você conceda ao aplicativo acesso aos seus arquivos. Para continuar, consenta com a solicitação.

   

5. Você deve ver a lista de arquivos.

   

6. Mantenha o servidor Node.js em execução porque você o usará na próxima parte do exercício.