Aller au contenu principal

30-5 Téléversement côté client

Ayant un contrôleur capable de recevoir et sauvegarder des fichiers, on peut poursuivre la portion client. Nous étions rendus à faire un appel d'API pour soumettre le fichier.

Qui dit appel d'API dit HttpClient pour communiquer!

Créer le client UploadHttpClient​

  1. Sous le projet Web.Admin, sous le dossier Clients -> Add -> Class/Interface
  2. Nommer la classe UploadHttpClient
  3. Ajoutez le UploadHttpClient à l'injection de dépendances
    Snowfall.Web.Admin/Configurations/InjectionDependancesConfig.cs
    public static class InjectionDependancesConfig
    {
        public static IServiceCollection EnregistrerServices(this IServiceCollection services)
        {
            if (services == null)
                throw new ArgumentNullException(nameof(services));

            services.AddScoped<EvenementHttpClient>();
            services.AddScoped<VilleHttpClient>();
            services.AddScoped<UploadHttpClient>();

            return services;
        }
    }
  4. Ajouter la constante d'URL de base, injectez le HttpClient et une fonction Upload qui reçoit en paramètre un objet de type MultipartFormDataContent
    Snowfall.Web.ClientAdmin/Clients/UploadClient.cs
    public class UploadHttpClient
    {
        private const string BaseApiUrl = "api/uploads";
        private readonly HttpClient _client;
            
        public UploadHttpClient(HttpClient client)
        {
            _client = client;
        }
            
        public async Task<ResultatUpload?> Upload(MultipartFormDataContent content)
        {
                
        }
    }
  5. Le client fera un POST sur l'API et enverra le contenu du fichier en paramètre.
    Snowfall.Web.Admin/HttpClients/UploadHttpClient.cs
    public class UploadHttpClient
    {
        private const string BaseApiUrl = "api/uploads";
        private readonly HttpClient _client;
            
        public UploadHttpClient(HttpClient client)
        {
            _client = client;
        }
            
        public async Task<ResultatUpload?> Upload(MultipartFormDataContent content)
        {
            ResultatUpload? resultatUpload = null;
            
            var reponse = await _client.PostAsync(BaseApiUrl, content);

            // Lire la réponse si un succès et retourner le contenu de la réponse
        }
    }

Compléter le processus de téléversement​

Oups, un malencontreux incident est survenu et vous devrez compléter par vous-même le reste du téléversement de fichiers!

Imgur

  1. Premièrement, gérez le retour dans l'action Upload du contrôleur
  2. Ensuite, procédez au téléversement dans le composant en appelant votre client HTTP.
  3. Assurez-vous de donner une rétroaction à l'utilisateur lorsque le fichier est téléversé.
  4. N'oubliez pas d'associer le retour du téléversement à votre DTO d'événement pour que le lien s'effectue entre le fichier téléversé et votre événement!

Stratégies​

Assurez-vous que la base fonctionne avant d'aller trop loin. Par exemple, sélectionnez un fichier à envoyer et regardez en parallèle votre dossier Storage.

info

C'est normal que votre dossier Storage ne soit pas dans le projet Shared. Vestige d'une année précédente! ;)

Imgur

Poussez plus loin et vérifiez que vous pouvez offrir une rétroaction à l'utilisateur comme quoi l'image a été ajoutée.

img

party-cat