Aller au contenu principal

30-1 Dossier de fichiers partagé

Jusqu'à maintenant, nous avons fait abstraction des images dans le projet d'API/Blazor. La raison est que les images des événements sont stockées dans le dossier wwwroot du projet MVC.

Lorsqu'on fait référence à un fichier, la recherche se fait dans le dossier wwwroot du projet actif. Or, il n'est pas possible d'accéder au dossier wwwroot d'un autre projet.

Donc, dans le projet client et API, il est impossible de faire référence au dossier wwwroot du projet MVC pour récupérer les images d'événement. Même si c'était possible, cela ne ferait pas tellement de sens de toute façon.

Les fichiers devraient être stockés dans un endroit neutre pouvant être accédé par les différentes portions de notre application. À la limite, on devrait pouvoir changer de technologie, sans impact sur le stockage de fichiers et d'images.

Nous allons concevoir une solution générique de stockage de fichiers. Elle sera utilisée pour les images dans notre cas, mais pourrait être utilisée pour d'autres types de fichiers au besoin.

Créer un dossier Storage sous la solution​

Afin de stocker les fichiers, nous allons créer un dossier Storage. Ce dossier sera un dossier classique sans particularité. On créera ce dossier sous la solution. Ainsi, pour ce faire, **vous devrez être en mode File System dans Rider.

  1. Assurez-vous de basculer du mode Solution au mode File System dans Rider. img
  2. Sous la solution Snowfall -> Add -> Directory
  3. Nommez le dossier Storage
info

À noter que le nom pourrait être différent, il s'agit d'identifier clairement que le dossier servira au stockage de fichiers pour l'application.

Déplacer les images dans le dossier Storage​

Maintenant, à partir du projet MVC, déplacez vos fichiers d'images à la racine du dossier Storage. Ne copiez pas le dossier evenements, seulement les fichiers.

Vous devriez avoir quelque chose comme ceci:

img

Mettre à jour le projet MVC​

Vous pouvez partir le projet MVC et malheureusement, puisque les images ont été déplacées, les images associées ne s'affichent plus.

Imgur

Il faudra faire quelques légères modifications afin de pouvoir récupérer les images en provenance du dossier Storage

Ajouter le dossier partagé Storage comme provider de fichiers​

On doit dire à l'application, soit le projet MVC dans ce cas, d'utiliser le dossier partagé Storage comme une source de fichiers.

Dans le fichier program.cs du projet MVC, ajoutez UseStaticFiles afin de créer un PhysicalFileProvider:

Snowfall.Web.Mvc/Program.cs
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.GetFullPath(Path.Combine(builder.Environment.ContentRootPath, "..", "Storage"))),
    RequestPath = "/storage"
});
info
  • new PhysicalFileProvider crée une nouvelle source de fichiers statiques
  • Path.GetFullPath(Path.Combine(builder.Environment.ContentRootPath, "..", "Storage"))) indique le chemin vers cette source de fichiers, soit le dossier Storage dans le projet Snowfall.Shared à partir de la racine du projet
  • RequestPath indique à partir de quelle URL de base des fichiers seront accessibles. On aurait pu utiliser /fichiers, /files, etc.

Modifier le chemin vers les images dans les vues​

Il ne reste qu'à modifier le chemin vers les images dans les vues où nous voulons afficher des images.

Par exemple, dans la vue partielle _Evenement:

Snowfall.Web.Mvc/Views/Evenements/_Evenement.cshtml
<img class="card-evenement img-fluid rounded-top object-fit-cover" src="~/storage/@Model.ImagePath"/>
info

Plutôt que de faire référence à ~/images/evenements/@Model.ImagePath, on utilise le nouveau dossier via ~/storage/@Model.ImagePath.

/storage est traité comme un dossier faisant partie de wwwroot même si physiquement ce n'est pas le cas. Il s'agit d'un genre de dossier virtuel.

Vous devriez voir les images s'afficher.

Utiliser appsettings.json​

Pour stocker la référence au fichier Storage, il est une bonne pratique de mettre la référence dans le fichier appsettings.json.

Snowfall.Web.Mvc/appsettings.Development.json
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "AppDatabaseConnection" : "Server=localhost;Database=snowfall;User Id=postgres;Password=admin;Include Error Detail=true;"
  },
  "DossierStorage": "../Storage"
}

Ensuite, on utilise cette propriété dans Program.cs/ UseStaticFiles:

Snowfall.Web.Mvc/Program.cs
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.GetFullPath(Path.Combine(builder.Environment.ContentRootPath, builder.Configuration["DossierStorage"]!))),
    RequestPath = "/storage"
});

Appliquer les configurations au projet d'API​

On appliquera la même configuration au projet d'API (serveur) afin que ce dernier puisse utiliser le dossier de fichiers partagés.

Snowfall.Web.Api/appsettings.Development.json
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "AppDatabaseConnection" : "Server=localhost;Database=snowfall;User Id=postgres;Password=admin;Include Error Detail=true;"
  },
  "DossierStorage": "../Storage"
}

Ensuite, ajoutez une autre entrée UseStaticFiles à celle existante:

Snowfall.Web.Api/Program.cs
// Blazor
app.UseBlazorFrameworkFiles();
app.UseStaticFiles()
    .UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.GetFullPath(Path.Combine(builder.Environment.ContentRootPath, builder.Configuration["DossierStorage"]!))),
        RequestPath = "/storage"
    });

Test​

Assurez-vous que vos images du projet MVC s'affichent correctement, nous poursuivrons avec le projet d'API / Blazor dans les prochains niveaux.