Ejercicio: Carga de archivos de usuario

Completado

Estos son los pasos para agregar una característica de carga a la aplicación.

Mostrar un elemento de entrada de archivo de explorador

1. Abra Pages/Files.cshtml en el editor de código.

2. Busque el elemento form existente y observe que contiene un control de entrada de archivo. La entrada tiene un asp-forvalor de UploadedFile.

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

3. Abra Pages/Files.cshtml.cs en el editor de código.

4. El archivo cargado por un usuario se asignará a una propiedad en la clase FilesModeldenominada UploadedFile.

5. Busque el OnPostAsync()method y reemplace el código existente por el código siguiente para controlar la copia del archivo cargado en MemoryStream. Una vez creada la secuencia, se pasa al 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. Guarde el archivo Files.cshtml.cs antes de continuar.

Agregar compatibilidad con la carga de archivos grandes

1. Abra Graph/GraphFilesClient.cs en el editor de código.

2. Busque el método UploadFile() y tenga en cuenta que controla las siguientes tareas:

   • Se determina el tamaño del archivo cargado.
   • Si el archivo es superior a 4 MB, se realiza una llamada a un método denominado UploadLargeFile().
   • Si el archivo es de menos de 4 MB, se realiza una solicitud PUT para cargar el archivo.

3. Busque el método UploadLargeFile(). Acepta una ruta de acceso de elemento y la secuencia de archivos que se van a cargar como parámetros. También crea un objeto DriveItemUploadableProperties que controla el reemplazo de archivos durante el proceso de carga si ya existen en OneDrive.

4. Ubique el comentario Create the upload session. Agregue el siguiente código inmediatamente después del comentario:

   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 hace lo siguiente:

   • Crear una sesión de carga
   • Crea un objeto LargeFileUploadTask y le pasa la sesión de carga, la secuencia para cargar y el tamaño máximo del segmento.
   • Crea un objeto de carga de archivos de gran tamaño Progress que registra información sobre el proceso de carga.

5. Busque el método try y reemplace el código existente por el código siguiente:

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

   Este código inicia el proceso de carga de archivos grandes y registra información sobre el éxito o el error.

6. Guarde el archivo GraphFilesClient.cs antes de continuar.

Ejecutar la aplicación

Es el momento de ejecutar la aplicación y cargar un archivo.

1. Realice el siguiente paso en función del editor de código:

   • Visual Studio

     Pulse F5 para compilar y ejecutar el proyecto.

   • Visual Studio Code u otro editor de código

     Abra una ventana de terminal en la carpeta Begin y ejecute el siguiente comando:

     dotnet run
     

2. Abra un explorador y visite https://localhost:5001.

3. Inicie sesión con el inquilino para desarrolladores de Microsoft 365 que usó anteriormente al registrar la aplicación Microsoft Entra.

4. Seleccione el vínculo Archivos en el encabezado para ver los archivos de OneDrive del usuario.

5. Seleccione el botón Seleccionar archivo y seleccione un archivo de la máquina que quiera cargar.

6. Seleccione el botón Upload File para iniciar el proceso de carga. Una vez completada la carga del archivo, verá el archivo en la página.

   Nota:

   Si el tamaño del archivo es superior a 4 MB, cambie a la ventana de terminal en ejecución. Verá que se muestra el estado del archivo cargado. Una vez completada la carga, se escribirá un valor de identificador de elemento en la ventana de terminal y verá el nombre de archivo en el explorador.

   

7. Cierre el explorador y presione CTRL+C en la ventana del terminal para detener el servidor antes de continuar.

   Nota:

   Si ha abierto el proyecto en Visual Studio, puede cerrar el explorador o seleccionar Mayús+F5 en Visual Studio para detener el servidor. Cierre la ventana de terminal Visual Studio crea si sigue abierta.

Continuar