Téléchargement de fichiers avec l’interface utilisateur Telerik pour Blazor

Pour le téléchargement de fichiers, Telerik UI pour Blazor offre une puissante combinaison de facilité d’utilisation et de fiabilité, ce qui en fait une solution fantastique pour tout développeur Blazor.

À propos de Blazor

de Microsoft Blazer est un framework de développement Web innovant développé en tant que composant de l’écosystème .NET. Cet écosystème est composé d’une grande variété d’outils et de bibliothèques utilisés dans le processus de création de logiciels.

Ce framework se distingue de la concurrence car il permet aux développeurs de créer une logique côté client, souvent appelée code dans le navigateur Web de l’utilisateur, à l’aide de C#, un langage de programmation largement utilisé et très efficace, généralement réservé au développement côté serveur.

Le fait que les développeurs puissent créer des interfaces utilisateur interactives avec Blazor en utilisant C#, HTML et CSS le distingue des autres plates-formes. Cette nouvelle approche est à l’origine de son attrait croissant auprès des différents développeurs .NET.

Interface utilisateur Telerik pour Blazor

Progrès Interface utilisateur Telerik pour Blazor, une nouvelle amélioration de cette nouvelle plate-forme, modifie efficacement l’expérience de développement logiciel en fournissant des outils complets avec plus de 100 composants Blazor véritablement natifs et faciles à personnaliser, qui peuvent améliorer considérablement la productivité et simplifier le processus dans une bien plus grande mesure. En intégrant Telerik UI à Blazor, nous pouvons utiliser des fonctionnalités supplémentaires et créer plus rapidement des applications en ligne hautement efficaces et dynamiques.

Par exemple, il comporte un composant InputFile qui simplifie la lecture des données à partir des fichiers du navigateur à l’aide du code .NET. Ce composant restitue un HTML <input> élément avec le type de fichier. Les utilisateurs sont autorisés à sélectionner des fichiers individuels par défaut. L’ajout de plusieurs propriétés, en revanche, permet aux utilisateurs de télécharger plusieurs fichiers simultanément. Cela peut être utile lors du téléchargement de fichiers PDF, entre autres types de fichiers.

De plus, Telerik UI pour Blazor fonctionne parfaitement avec les mécanismes de sécurité intégrés et les contraintes de taille de fichier inclus dans Blazor, ce qui permet d’éviter les difficultés de performances et de sécurité. Pour cette raison, les développeurs de logiciels sont libres de se concentrer davantage sur la logique et les fonctionnalités des programmes qu’ils créent plutôt que de s’inquiéter de la possibilité de problèmes de performances ou de risques de sécurité.

En utilisant Telerik UI pour Blazor, voici un exemple de la façon de réaliser plusieurs téléchargements de fichiers :

<TelerikUpload  SaveUrl="https://my-app.com/api/Upload/Save"
  RemoveUrl="https://my-app.com/api/Upload/Remove"
  AutoUpload="true"
  Multiple="true" />

Dans cette démonstration, le SaveUrl la variable renvoie à la méthode sur votre serveur utilisée pour enregistrer les fichiers, et le RemoveUrl La variable correspond à la méthode utilisée pour supprimer les fichiers. Lorsque les utilisateurs sélectionnent des fichiers, le téléchargement commence immédiatement si le AutoUpload Le paramètre a été défini sur true et les utilisateurs peuvent télécharger plusieurs fichiers si le Multiple le paramètre a été défini sur true.

Enregistrement des images et redimensionnement

Tout d’abord, ajoutez une référence à System.Drawing.Common à votre projet :

dotnet add package System.Drawing.Common

Ensuite, le contenu de votre fichier.razor devrait ressembler à ceci :

@using Telerik.Blazor.Components
@using Telerik.Blazor.Input
@using System.Drawing
@using System.Drawing.Imaging
@using System.IO

<TelerikUpload OnSelect="@OnSelectHandler" 
OnRemove="@OnRemoveHandler" 
AutoUpload="true" 
AllowedExtensions="new string[]{ ‘.jpg’, ‘.jpeg’, ‘.png’ }" 
MaxFileSize="2097152"></TelerikUpload>

@code {
    private static readonly string ImageDirectory = Path.Combine(Directory.GetCurrentDirectory(), "images");
    
    async Task OnSelectHandler(IList<IFileFromBlazor> files)
    {
        try
        {
            foreach (var file in files)
            {
                string path = Path.Combine(ImageDirectory, file.Name);
                EnsureDirectoryExists(path);

                using (var memoryStream = new MemoryStream())
                {
                    await file.WriteToStreamAsync(memoryStream);

                    using (var originalImage = new Bitmap(memoryStream))
                    {
                        var newImage = ResizeImage(originalImage, 1024, 1024);

                        newImage.Save(path, GetImageFormat(file.Name));
                    }
                }
            }
        }
        catch (Exception ex)
        {
            
            
        }
    }

    async Task OnRemoveHandler(IFileFromBlazor file)
    {
        try
        {
            string path = Path.Combine(ImageDirectory, file.Name);
            if (File.Exists(path))
            {
                File.Delete(path);
            }
        }
        catch (Exception ex)
        {
            
            
        }
    }

    private static ImageFormat GetImageFormat(string fileName)
    {
        var extension = Path.GetExtension(fileName);
        switch (extension.ToLower())
        {
            case ".jpg", ".jpeg":
                return ImageFormat.Jpeg;
            case ".png":
                return ImageFormat.Png;
            default:
                throw new NotSupportedException("File extension is not supported");
        }
    }

    private static void EnsureDirectoryExists(string filePath)
    {
        string directory = Path.GetDirectoryName(filePath);
        if (!Directory.Exists(directory))
        {
            Directory.CreateDirectory(directory);
        }
    }

    private static Bitmap ResizeImage(Image originalImage, int maxWidth, int maxHeight)
    {
        var ratioX = (double)maxWidth / originalImage.Width;
        var ratioY = (double)maxHeight / originalImage.Height;
        var ratio = Math.Min(ratioX, ratioY);

        var newWidth = (int)(originalImage.Width * ratio);
        var newHeight = (int)(originalImage.Height * ratio);

        var newImage = new Bitmap(newWidth, newHeight);
        using (var graphics = Graphics.FromImage(newImage))
        {
            graphics.DrawImage(originalImage, 0, 0, newWidth, newHeight);
        }

        return newImage;
    }
}

Les utilisateurs peuvent télécharger des fichiers image en utilisant les extensions de fichier .jpg, .jpeg et .png, et chaque image soumise est automatiquement mise à l’échelle pour atteindre une largeur et une hauteur maximales de 1 024 pixels tout en préservant le rapport hauteur/largeur d’origine de l’image. La taille maximale du fichier pour chaque photographie est de 2 Mo maximum.

Voici un résumé de ce que font les principales parties du code :

Composant de téléchargement Telerik

L’interface utilisateur (UI) pour le téléchargement de fichiers est gérée par le Télécharger composant. Lorsqu’un utilisateur sélectionne un fichier, le OnSelect L’événement est déclenché et lorsqu’un utilisateur supprime un fichier de la liste, l’événement OnRemove l’événement est déclenché. L’interaction de l’utilisateur déclenche ces deux événements.

SurSelectHandler

Quand le OnSelect l’événement est déclenché, le OnSelectHandler la fonction est appelée. Il lira le fichier téléchargé, redimensionnera l’image tout en préservant les proportions et le stockera dans un répertoire à l’intérieur du répertoire racine de votre application appelé « images ». De plus, la fonction vérifie si le répertoire existe ; si ce n’est pas le cas, il crée le répertoire. Le bloc catch comprend un espace réservé de remarque pour vous permettre de gérer l’exception selon vos besoins. Cette erreur est capturée et traitée dans le bloc catch si elle se produit au cours de ce processus (par exemple, manque de droits d’écriture ou stockage inadéquat), et elle est gérée si une exception se produit au cours de ce processus.

OnRemoveHandler

Quand le OnRemove l’événement est déclenché, le OnRemoveHandler la fonction est appelée. Lorsqu’un fichier est supprimé côté client, le fichier correspondant sur le serveur est également supprimé du côté client. images annuaire. L’exception est interceptée et gérée dans le bloc catch, un espace réservé pour le code fondamental de gestion des erreurs. L’erreur est capturée et gérée dans le bloc catch si une exception se produit lors du processus de suppression (comme un fichier manquant ou un manque de droits).

ObtenirImageFormat

Cette fonction est chargée de renvoyer une instance du bon ImageFormat classe basée sur l’extension de fichier de l’image téléchargée.

Assurer que le répertoire existe

Cette fonction déterminera d’abord si le répertoire dans lequel l’image doit être enregistrée existe déjà et, si ce n’est pas le cas, elle créera ensuite le répertoire.

Redimensionner l’image

Cette méthode accepte une image et un ensemble de dimensions en entrée et produit une nouvelle image qui a été mise à l’échelle pour s’adapter à ces paramètres tout en préservant les proportions de l’image d’origine. La largeur et la hauteur de la nouvelle image sont calculées pour garantir qu’elles ne dépassent pas les valeurs maximales fournies, et le rapport hauteur/largeur de la nouvelle image reste identique à celui de l’image d’origine.

Plongez dans Blazor

Alors que vous continuez à vous renseigner sur Blazor et Telerik UI pour Blazor, voici quelques recommandations à prendre en considération :

Apprentissage pratique

Mettre les nouvelles technologies en pratique est souvent la méthode la plus efficace pour en apprendre davantage. Pensez à créer une application de base à l’aide de Blazor et du plugin Telerik UI for Blazor. Il peut s’agir d’un simple blog ou d’une application en ligne facile à utiliser, comme une liste de tâches.

Suivre https://demos.telerik.com/blazor-ui pour les démos et les terrains de jeux.

Documentation

La documentation officielle de Microsoft pour Blazor est complète et conviviale pour les novices. De plus, Telerik propose une documentation complète pour son interface utilisateur pour Blazor. Utilisez ces ressources pour approfondir votre étude et améliorer votre compréhension.

Suivre https://docs.telerik.com/blazor-ui/introduction pour une documentation complète.

Tutoriels et cours en ligne

Vous pouvez étudier Blazor et Telerik UI pour Blazor avec l’aide de nombreux didacticiels et cours en ligne. Ces ressources incluent des cours vidéo sur YouTube, Coursera et Udemy.

Si vous disposez actuellement d’une licence active, suivez https://learn.telerik.com/ pour s’entraîner.

Participez à des forums en ligne tels que Stack Overflow, Reddit ou à la communauté officielle de la plateforme Blazor. Grâce à ces plateformes, vous pouvez apprendre des expériences d’autres développeurs, poser des questions et partager votre travail.

Suivez le forum officiel de Telerik pour Blazor sur https://www.telerik.com/forums/blazor.

Restez à jour

Blazor et Telerik UI pour Blazor se développent constamment. Chaque nouvelle version comporte des composants améliorés ou nouveaux. Suivez les blogs, forums et plateformes de médias sociaux appropriés pour rester informé des dernières fonctionnalités et développements.

Suivez le blog Telerik et restez à l’écoute : https://www.telerik.com/blogs.

Conclusion

Travailler avec les téléchargements de fichiers dans Telerik UI pour Blazor est incontestablement bénéfique. Le composant Upload possède une interface facile à utiliser qui permet aux développeurs d’intégrer simplement des fonctionnalités de gestion de fichiers dans leurs applications.

De plus, la bonne réputation de Progress Telerik garantit la fiabilité du composant. Ils sont réputés pour fournir des outils de développement robustes et de haute qualité. Les composants Telerik sont minutieusement testés et réglés pour garantir performances et stabilité et être conviviaux.

Un autre avantage est la garantie de mises à jour régulières. Les composants sont mis à jour avec les dernières tendances et normes de développement Web. Cela signifie que si vous utilisez Telerik UI pour Blazor, vous pouvez vous attendre à des mises à niveau régulières qui incluent de nouvelles fonctionnalités, des améliorations de performances et des corrections de bugs, permettant à votre application de rester contemporaine, sûre et efficace.

Il est important de noter que Telerik fournit des services d’assistance exceptionnels, même aux utilisateurs de l’édition d’essai du produit. Cela garantit que vous pouvez explorer et comprendre en profondeur les capacités des composants.

Enfin, l’interface utilisateur Telerik pour Blazor pour le téléchargement de fichiers offre une puissante combinaison de facilité d’utilisation, de fiabilité et de support continu, ce qui en fait une solution fantastique pour tout développeur Blazor. Si vous ne l’avez pas déjà fait, je vous recommande fortement d’obtenir une version d’essai de Telerik UI pour Blazor pour en savoir plus sur ses capacités et ses avantages pour vos projets. Vous bénéficiez d’une assistance gratuite pendant la période d’essai et Telerik dispose d’une équipe d’assistance légendaire qui peut vous aider à répondre à vos besoins.

Essayez maintenant