Exercício - Upload de arquivos de usuário

Concluído

Aqui estão as etapas para adicionar um recurso de upload ao seu aplicativo.

Exibir um elemento de entrada do navegador e um manipulador de eventos para o upload

1. Abra o arquivo index.html.

2. Localize a linha <ul id="downloadLinks"></ul> e adicione a seguinte marcação imediatamente após ela:

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

   O bloco de conteúdo <div> resultante deve ser semelhante ao seguinte:

   <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. Agora, abra o arquivo ui.js no editor de código e adicione o seguinte código ao final do arquivo:

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

Adicionar uma função para carregar o arquivo usando o Microsoft Graph SDK

1. Abra o arquivo graph.js no editor de código.

2. Adicione essa função na parte inferior do arquivo:

   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. Salve o arquivo graph.js antes de continuar.

Execute o aplicativo

Atualize seu navegador. Ao entrar, você deverá ver um botão de carregamento.

Selecione o botão e escolha um arquivo do computador. Você pode observar que, na primeira vez que carregar, verá uma nova janela pop-up de consentimento solicitando permissão para gravar e ler arquivos. Quando o arquivo começa a ser carregado, uma mensagem é exibida.

Na primeira vez que fizer isso, você verá outra janela pop-up de consentimento porque agora está solicitando para gravar arquivos.

Quando o upload for concluído, a mensagem mostrará o número de bytes carregados e o arquivo aparecerá na lista de arquivos.

Pare o servidor Node.js selecionando CTRL+C na janela do terminal.