Téléchargement de fichiers dans les applications Web Blazor Server

Découvrez comment télécharger des fichiers dans une application Web Blazor Server exécutée sur .NET 8.

Le téléchargement de données client, telles qu’une photo pour un profil d’utilisateur ou un document PDF, est standard dans le développement Web moderne.

Dans ce Les bases du Blazor Dans cet article, nous apprendrons comment télécharger un fichier à l’aide de Blazor Server. Ceci est un autre exemple de la façon dont Blazor Server rend les choses étonnamment simples par rapport à d’autres technologies de développement Web.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Composant Blazor utilisant InputFile

Nous implémentons un composant Blazor avec un modèle HTML simple et une méthode de gestionnaire d’événements unique dans cet exemple.

Le code du modèle du Upload le composant ressemble à ceci :

@page "/upload"

<PageTitle>Blazor Server File Upload</PageTitle>

<h1>Blazor Server File Upload</h1>

<div style="margin-bottom: 20px; display: flex;">
    <div>Select your file:</div>
    <InputFile OnChange="FileUploaded" />
</div>

<h2>Selected file</h2>
<div>
    <div>File name: @FileName</div>
    <div>File size: @FileSize.ToString("n0") bytes</div>
    <div>File type: @FileType</div>
    <div>Last modified: @LastModified</div>
</div>

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div>Error: @ErrorMessage</div>
}

Nous utilisons le @page directive pour faire du composant une page routable. Ensuite, nous utilisons le build-in PageTitle composant pour définir le titre de la page affiché dans l’onglet du navigateur.

Le cœur du modèle HTML utilise le module intégré InputFile composant. Nous fournissons une méthode pour gérer le OnChange événement. Nous examinerons la méthode de mise en œuvre du FileUploaded méthode dans le chapitre suivant.

<InputFile OnChange="FileUploaded" />

Le reste du code du composant nous aide à comprendre ce qui se passe et n’a pas besoin d’être utilisé lors de l’implémentation du téléchargement de fichiers.

Tout d’abord, nous souhaitons afficher des informations sur le fichier téléchargé, ce qui nous permettra de confirmer que nous avons téléchargé les informations correctes.

La dernière partie est plus importante.

Nous souhaitons afficher les messages d’erreur de l’utilisateur en cas d’échec du téléchargement du fichier. Nous vérifions si le ErrorMassage la propriété contient des informations et les restitue dans un HTML div élément.

Gestion du téléchargement de fichiers

La section de code du Upload Le composant de page contient un seul FileUploaded méthode, qui est utilisée comme rappel pour le OnChange événement de la FileInput composant.

De plus, nous disposons de quelques propriétés pour afficher des informations détaillées sur le fichier téléchargé sur la page lorsque l’utilisateur télécharge un fichier.

@code {
    public string FileName { get; set; } = "";
    public long FileSize { get; set; }
    public string FileType { get; set; } = "";
    public DateTimeOffset LastModified { get; set; }
    public string ErrorMessage { get; set; } = "";

    const int MAX_FILESIZE = 5000 * 1024; 

    public async Task FileUploaded(InputFileChangeEventArgs e)
    {
        var browserFile = e.File;

        if (browserFile != null)
        {
            FileSize = browserFile.Size;
            FileType = browserFile.ContentType;
            FileName = browserFile.Name;
            LastModified = browserFile.LastModified;

            try
            {
                var fileStream = browserFile.OpenReadStream(MAX_FILESIZE);

                var randomFile = Path.GetTempFileName();
                var extension = Path.GetExtension(browserFile.Name);
                var targetFilePath = Path.ChangeExtension(randomFile, extension);

                var destinationStream = new FileStream(targetFilePath, FileMode.Create);
                await fileStream.CopyToAsync(destinationStream);
                destinationStream.Close();
            }
            catch (Exception exception)
            {
                ErrorMessage = exception.Message;
            }
        }
    }
}

Nous fixons le MAX_FILESIZE constante à 2 mégaoctets pour limiter la taille du fichier que l’utilisateur peut télécharger.

Je recommande fortement de limiter la taille des fichiers. Sinon, vous risquez d’épuiser le stockage disponible et, par conséquent, de causer des problèmes de fonctionnement du service.

L’asynchrone FileUploaded la méthode accepte un seul paramètre de type InputFileChangeEventArgs. Ce type expose un File propriété, que nous pouvons utiliser pour accéder au contenu et aux métadonnées du fichier.

Dans cet exemple de code, nous attribuons la valeur du File propriété à un local browserFile variable. Le type est IBrowserFile.

Tout d’abord, nous vérifions si le browserFile La variable contient une valeur, ce qui signifie qu’un fichier a été sélectionné. Nous pouvons utiliser le Size, ContentType, Name et LastModified propriétés pour accéder aux métadonnées.

Ensuite, nous utilisons un try-catch bloquer pour attraper n’importe quel IOExceptions ou des erreurs similaires lors du processus de traitement du téléchargement du fichier.

Nous utilisons le OpenReadStream et fournissez la constante de taille de fichier maximale comme argument.

Ensuite, nous utilisons le Path.GetTempFileName méthode pour créer un fichier temporaire sur le disque. C’est un emplacement auquel la plupart des programmes .NET auront accès en écriture. Cependant, vous souhaiterez peut-être choisir l’emplacement sur le disque qui vous convient le mieux, en fonction de votre cas d’utilisation.

Note: L’exemple de code ici écrit sur le disque local, car il s’agit de l’approche la plus simple et elle est également indépendante des autres ressources.

Une autre option consiste à envoyer les informations à une API ou à les stocker dans une base de données.

Nous utilisons le GetExtension et ChangeExtension méthodes pour créer un chemin de fichier cible approprié.

Ensuite, nous créons un FileStream objet et fournissez le chemin de fichier prévu et le FileMode.Create valeur enum comme deuxième argument du constructeur.

Nous utilisons le CopyToAsync sur le flux de fichiers créé pour copier le contenu du fichier téléchargé vers le flux de fichiers sur le disque local. Nous devons également nous assurer d’appeler le Close méthode pour fermer le flux et libérer toutes les ressources, telles que les sockets et les descripteurs de fichiers.

Dans le bloc catch, on accède simplement au Message propriété sur le Exception et définissez son contenu sur le ErrorMessage propriété que nous montrons à l’écran.

Note: Vous souhaiterez peut-être implémenter une gestion appropriée des erreurs dans une application réelle, par exemple en enregistrant l’erreur et en affichant à l’utilisateur un message d’erreur générique pour empêcher une attaque d’exploiter votre application.

Téléchargement de plusieurs fichiers

Parfois, nous souhaitons autoriser le téléchargement de plusieurs fichiers ensemble. Par exemple, pour une publication sur les réseaux sociaux ou une annonce immobilière.

Ajout du multiple Attribut HTML du InputFile Le composant est tout ce que nous devons faire dans le modèle de composant.

Ensuite, nous modifions la méthode du gestionnaire d’événements pour gérer plusieurs fichiers.

public async Task FileUploaded(InputFileChangeEventArgs e)
{
    var browserFiles = e.GetMultipleFiles();

    foreach( var browserFile in browserFiles)
    {
        if (browserFile != null)
        {
            FileSize = browserFile.Size;
            FileType = browserFile.ContentType;
            FileName = browserFile.Name;
            LastModified = browserFile.LastModified;

            try
            {
                var fileStream = browserFile.OpenReadStream(MAX_FILESIZE);

                var randomFile = Path.GetTempFileName();
                var extension = Path.GetExtension(browserFile.Name);
                var targetFilePath = Path.ChangeExtension(randomFile, extension);

                var destinationStream = new FileStream(targetFilePath, FileMode.Create);
                await fileStream.CopyToAsync(destinationStream);
                destinationStream.Close();
            }
            catch (Exception exception)
            {
                ErrorMessage = exception.Message;
            }
        }
    }        
}

Premièrement, au lieu d’utiliser le File propriété sur le InputFileChangeEventArgs tapez, nous utilisons le GetMultipleFiles méthode. Cette méthode renvoie un IReadOnlyList de IBrowserFile.

Utilisant un foreach nous parcourons les fichiers de cette liste et exécutons le même code pour chaque fichier que nous avons précédemment utilisé pour gérer un seul téléchargement de fichier.

Note: Bien entendu, les informations sur le fichier à l’écran n’afficheront désormais que les données du dernier fichier traité.

Meilleures pratiques pour les téléchargements de fichiers

Lorsque nous travaillons avec du contenu utilisateur, tel que des fichiers téléchargés, nous devons être prudents et appliquer bonnes pratiques de sécurité.

Comme indiqué précédemment dans cet article, limiter la taille du fichier est une considération de sécurité importante. Nous ne voulons pas offrir à l’utilisateur la possibilité d’épuiser le stockage disponible.

Vérification du format de fichier et autoriser uniquement certains types de contenu est essentiel. Si vous souhaitez que l’utilisateur télécharge une photo ou une image, assurez-vous d’autoriser uniquement le contenu correspondant.

Nous devrions également vérifier le contenu des fichiers contre les virus ou autres contenus dangereux si nous acceptons les formats à risque, tels que les documents PDF pouvant contenir du code exécutable.

Il y a un Aide-mémoire pour le téléchargement de fichiers qui inclut les meilleures pratiques d’OSWAP.

Considérations sur Blazor WebAssembly

Dans cet article, nous avons expliqué comment implémenter le téléchargement de fichiers pour Blazor Server. Blazor Server, avec son architecture de serveur fonctionnant en permanence, rend particulièrement simple la mise en œuvre d’un téléchargement de fichier.

Lors de l’exécution sur WebAssembly, nous n’avons pas d’accès direct au serveur à partir du code client.

Au lieu de cela, nous devons appeler une API pour gérer le téléchargement de fichiers côté serveur. Il existe de nombreux services cloud, tels que le compte de stockage Azure, ou vous pouvez implémenter des services personnalisés.

Du côté positif, nous pouvons réutiliser le modèle de composant. Le InputFile composant et le OnChange La méthode du gestionnaire d’événements peut être réutilisée.

Cependant, au lieu d’écrire sur le disque local, nous souhaitons appeler une API et fournir le contenu que nous lisons depuis le InputFileChangeEventArgs argument de méthode.

Conclusion

Le téléchargement de fichiers est une tâche courante dans une application Web moderne. Blazor Server simplifie la mise en œuvre d’un téléchargement de fichier à l’aide de la fonctionnalité intégrée InputFile composant.

Selon si on ajoute le multiple Attribut HTML (ou non) au InputFile composant, nous pouvons gérer un ou plusieurs fichiers.

Nous pouvons réutiliser une partie du code pour Blazor WebAssembly mais nous devons nous rappeler que le code s’exécute sur le client et, par conséquent, nous devons appeler une API pour gérer les fichiers sur le serveur.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.