Exercice : charger des fichiers utilisateur

Effectué

Voici comment ajouter une fonctionnalité de chargement à votre application.

Afficher un élément d’entrée de fichier de navigateur

1. Ouvrez Pages/Files.cshtml dans votre éditeur de code.

2. Recherchez l’élément form existant et notez qu’il contient un contrôle d’entrée de fichier. L’entrée a une valeur 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. Ouvrez Pages/Files.cshtml.cs votre éditeur de code.

4. Le fichier téléchargé par un utilisateur sera affecté à une propriété dans la classe FilesModel nommée UploadedFile.

5. Recherchez la méthode OnPostAsync() et remplacez le code existant par le code suivant pour gérer la copie du fichier téléchargé dans MemoryStream. Une fois le flux créé, il est transmis à la méthode _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. Enregistrez le fichier Files.cshtml.cs avant de continuer.

Ajouter la prise en charge du chargement de fichiers de grande taille

1. Ouvrez Graph/GraphFilesClient.cs dans votre éditeur de code.

2. Recherchez la méthode UploadFile() et notez qu’elle gère les tâches suivantes :

   • La taille du fichier téléchargé est déterminée.
   • Si le fichier est supérieur à 4 Mo, un appel est effectué vers une méthode nommée UploadLargeFile().
   • Si la taille du fichier est inférieure à 4 Mo, une demande PUT est effectuée pour charger le fichier.

3. Recherchez la méthode UploadLargeFile(). Elle accepte un chemin d’accès d’élément et le flux de fichier à télécharger en tant que paramètres. Elle crée également un objet DriveItemUploadableProperties qui gère le remplacement des fichiers pendant le processus de chargement s’ils existent déjà dans OneDrive.

4. Recherchez le commentaire Create the upload session. Ajoutez le code suivant juste avant le commentaire :

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

   Ce code effectue les tâches suivantes :

   • Crée une session de chargement.
   • Crée un objet LargeFileUploadTask et lui transmet la session de chargement, le flux à télécharger et la taille maximale du secteur.
   • Crée un objet de chargement Progress de fichier de grande taille qui journalise les informations sur le processus de chargement.

5. Recherchez le bloc try et remplacez le code existant par le code suivant :

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

   Ce code démarre le processus de chargement de fichiers de grande taille et enregistre les informations sur la réussite ou l’échec.

6. Enregistrez le fichier GraphFilesClient.cs avant de continuer.

Exécuter votre application

Il est temps d’exécuter votre application et de télécharger un fichier !

1. Effectuez l’étape suivante en fonction de votre éditeur de code :

   • Visual Studio

     Appuyez sur F5 pour générer et exécuter le projet.

   • Visual Studio Code ou un autre éditeur de code

     Ouvrez une fenêtre terminal dans le dossier Début, puis exécutez la commande suivante :

     dotnet run
     

2. Ouvrez un navigateur et accédez à https://localhost:5001.

3. Connectez-vous à l’aide du locataire développeur Microsoft 365 que vous avez utilisé précédemment lors de l’inscription de l’application Microsoft Entra.

4. Sélectionnez le lien Fichiers dans l’en-tête pour afficher les fichiers OneDrive de l’utilisateur.

5. Sélectionnez le bouton Choisir un fichier, puis sélectionnez un fichier à partir de votre ordinateur que vous souhaitez télécharger.

6. Sélectionnez le bouton Télécharger un fichier pour démarrer le processus de chargement. Une fois le chargement du fichier terminé, le fichier est répertorié dans la page.

   Remarque

   Si la taille du fichier est supérieure à 4 Mo, basculez vers la fenêtre terminal en cours d’exécution. L’état du fichier téléchargé s’affiche. Une fois le téléchargement terminé, une valeur d’ID d’élément est écrite dans la fenêtre du terminal et le nom du fichier s’affiche dans le navigateur.

   

7. Fermez votre navigateur et appuyez sur Ctrl+C dans la fenêtre du terminal pour arrêter le serveur avant de continuer.

   Remarque

   Si vous avez ouvert le projet dans Visual Studio, vous pouvez fermer le navigateur ou sélectionner Maj+F5 dans Visual Studio pour arrêter le serveur. Fermez la fenêtre du terminal de Visual Studio si elle est toujours ouverte.