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 de arquivo do navegador

1. Abrir Pages/Files.cshtml em seu editor de código.

2. Localize o elemento existente form e observe que ele contém um controle de entrada de arquivo. A entrada tem um valor asp-for de UploadedFile.

   <form method="post" enctype="multipart/form-data">
     <input asp-for="UploadedFile" type="file">
     <input type="submit" value="Upload File">
   </form>
   

3. Abrir Pag/Files.cshtml.cs em seu editor de código.

4. O arquivo carregado por um usuário será atribuído a uma propriedade na FilesModel classe chamada UploadedFile.

5. Localize o método OnPostAsync() e substitua o código existente pelo código a seguir para lidar com a cópia do arquivo carregado em um MemoryStream. Uma vez que o fluxo é criado, ele é passado para o método _graphFilesClient.UploadFile().

   if (UploadedFile == null || UploadedFile.Length == 0)
   {
     return;
   }
   
   _logger.LogInformation($"Uploading {UploadedFile.FileName}.");
   
   using (var stream = new MemoryStream()) {
     await UploadedFile.CopyToAsync(stream);
     await _graphFilesClient.UploadFile(
     UploadedFile.FileName, stream);
   }
   
   await OnGetAsync();
   

6. Salve o arquivo Files.cshtml.cs antes de continuar.

Adicionar suporte para upload de arquivos grandes

1. Abrir GraphGraphFilesClient.cs em seu editor de código.

2. Localize o método UploadFile() e observe que ele lida com as seguintes tarefas:

   • O tamanho do arquivo carregado é determinado.
   • Se o arquivo for maior que 4 MB, uma chamada é feita para um método denominado UploadLargeFile().
   • Se o arquivo for menor que 4 MB, uma PUT será feita para carregar o arquivo.

3. Localize o método UploadLargeFile(). Ele aceita um caminho de item e o fluxo de arquivo para carregar como parâmetros. Ele também cria um objeto DriveItemUploadableProperties que lida com a substituição de arquivos durante o processo de upload, se eles já existirem no OneDrive.

4. Localize o comentário Create the upload session. Adicione o seguinte código imediatamente após o comentário:

   var uploadSession = await _graphServiceClient.Me.Drive.Root
       .ItemWithPath(itemPath)
       .CreateUploadSession(uploadProps)
       .Request()
       .PostAsync();
   
   // Max slice size must be a multiple of 320 KiB
   int maxSliceSize = 320 * 1024;
   var fileUploadTask = new LargeFileUploadTask<DriveItem>(uploadSession, stream, maxSliceSize);
   
   // Create a callback that is invoked after
   // each slice is uploaded
   IProgress<long> progress = new Progress<long>(prog =>
   {
     _logger.LogInformation($"Uploaded {prog} bytes of {stream.Length} bytes");
   });
   

   Este código executa as seguintes tarefas:

   • Cria uma sessão de upload.
   • Cria um objeto LargeFileUploadTask e passa a sessão de upload, fluxo para upload e o tamanho máximo da fatia para ele.
   • Cria um grande objeto de upload de arquivo Progress que registra informações sobre o processo de upload.

5. Localize o bloco try e substitua o código existente pelo seguinte código:

   // Upload the file
   var uploadResult = await fileUploadTask.UploadAsync(progress);
   
   if (uploadResult.UploadSucceeded)
   {
       _logger.LogInformation($"Upload complete, item ID: { uploadResult.ItemResponse.Id}");
   }
   else
   {
       _logger.LogInformation("Upload failed");
   }
   

   Esse código inicia o processo de upload de arquivo grande e registra informações sobre o sucesso ou a falha.

6. Salve o arquivo GraphFilesClient.cs antes de continuar.

Execute seu aplicativo

É hora de executar seu aplicativo e fazer upload de um arquivo!

1. Execute a seguinte etapa com base em seu editor de código:

   • Visual Studio

     Clique em F5 para compilar e executar o projeto.

   • Visual Studio Code ou outro editor de códigos

     Abra uma janela do terminal na pasta Iniciar e execute o seguinte comando:

     dotnet run
     

2. Abra um navegador e acesse https://localhost:5001.

3. Inicie sessão com o inquilino do programador do Microsoft 365 que utilizou anteriormente ao registar a Aplicação Microsoft Entra.

4. Selecione o link de Arquivos no cabeçalho para exibir os arquivos OneDrive do usuário.

5. Selecione o botão Escolher Arquivo e selecione um arquivo de seu computador que deseja enviar.

6. Selecione o botão de Upload de Arquivo para iniciar o processo de upload. Assim que o upload do arquivo for concluído, você verá o arquivo listado na página.

   Observação

   Se o tamanho do arquivo for maior que 4 MB, mude para a janela do terminal em execução. Você verá o status do arquivo enviado exibido. Assim que o upload for concluído, um valor de ID do item será escrito na janela do terminal e você verá o nome do arquivo exibido no navegador.

   

7. Feche o navegador e clique em CTRL+C na janela do terminal para interromper o servidor antes de continuar.

   Observação

   Se você abriu o projeto no Visual Studio, poderá fechar o navegador ou selecionar SHIFT+F5 no Visual Studio para interromper o servidor. Se ainda estiver aberta, feche a janela do terminal que o Visual Studio criou.

Continuar