You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
📦 Un [projet serveur et un projet client](../../static/files/labo20.zip) vous sont fournis. N'exécutez pas tout de suite le serveur, il y aura un modèle à ajouter, une migration à créer puis à exécuter plus tard.
4
-
5
-
(Oui, les projets se nomment `serveur11` et `client11`... c'est parce que `11` est une nouvelle manière d'écrire `20`.)
3
+
📦 Un [projet serveur et un projet client](../../static/files/labo21.zip) vous sont fournis. N'exécutez pas tout de suite le serveur, il y aura un modèle à ajouter, une migration à créer puis à exécuter plus tard.
6
4
7
5
🎨 La librairie `ImageSharp` est déjà installée sur le serveur.
8
6
@@ -12,24 +10,28 @@ L'objectif sera de permettre à l'utilisateur de sélectionner une image, l’en
12
10
13
11
### 1 - Requête et formulaire client
14
12
15
-
[💡](/cours/rencontre10.2#-envoyer-un-fichier-au-serveur) Modifiez l’`<input>` de type `file` et créez un `ViewChild` qui permettra d’accéder au fichier joint par l’utilisateur.
13
+
[💡](/notes/rencontre11.1#-envoyer-un-fichier-au-serveur) Modifiez l’`<input>` de type `file` et exploitez `useRef` pour accéder au fichier joint par l’utilisateur.
16
14
17
15
Produisez un **FormData** qui contiendra l’image et envoyez le **FormData** au serveur dans une requête `POST`. (Il se peut que vous deviez modifier l’URL de la requête plus tard sachant que l'action n'existe pas encore)
18
16
19
17
:::warning
20
18
21
-
La requête sera dans le `PictureService`, mais il faut construire **FormData** dans le composant `App`. Vous pourrez envoyer le **FormData** sous forme de paramètre au service. (Le type du paramètre sera `any`)
19
+
La requête sera dans le **hook**`usePictureAPI`, mais il faut construire **FormData** dans le composant `Home`. Vous pourrez envoyer le **FormData** sous forme de paramètre à `postPicture` dans le hook. (Le type du paramètre sera `any`)
22
20
23
21
:::
24
22
25
23
### 2 - Ajouter une action POST serveur
26
24
27
-
[💡](/cours/rencontre10.2#-sauvegarder-une-image-sur-le-serveur)Créez un Model pour les images. Il n’aura que 3 propriétés. Ce Model n’a absolument pas besoin d’exister côté client. Une fois le Model finalisé, créez une migration et mettez à jour la base de données.
25
+
[💡](/notes/rencontre11.1#-sauvegarder-une-image-sur-le-serveur)Complétez la classe `Picture.cs` qui servira de modèle pour les images. Elle n’aura que 3 propriétés. Ce modèle n’a absolument pas besoin d’exister côté client. Une fois le modèle finalisé et sauvegardé, créez une migration et mettez à jour la base de données.
28
26
29
27
Dans le contrôleur relativement vide fourni, complétez l’action `POST` qui recevra le fichier et l’ajoutera dans la **BD** et le **File System**.
30
28
31
29
On veut une **version originale** de l’image et une **version de taille réduite** avec une **hauteur de 200 pixels**.
32
30
31
+
<center></center>
32
+
33
+
Bien entendu, pour le moment on ne peut pas afficher ces images dans la page Web.
34
+
33
35
:::warning
34
36
35
37
Des dossiers existent déjà pour les images, vérifiez le répertoire du serveur.
@@ -38,7 +40,7 @@ Des dossiers existent déjà pour les images, vérifiez le répertoire du serveu
38
40
39
41
## 🐦 Le petit oiseau va sortir, attrapez-le
40
42
41
-
L’objectif pour cette étape sera d’envoyer la liste des ids de toutes les images au client Angular. On n’a pas besoin d’envoyer les `FileName` et les `MimeType`, juste les ids.
43
+
L’objectif pour cette étape sera d’envoyer la liste des ids de toutes les images au projet **Next.js**. On n’a pas besoin d’envoyer les `FileName` et les `MimeType`, juste les ids.
Assurez-vous simplement de recevoir la **liste d’ids** dans la fonction `ngOnInit` et dans la fonction `updateDisplay`. Ça ne sera pas suffisant pour pouvoir afficher les images, mais on y est presque.
54
+
Assurez-vous simplement de recevoir la **liste d’ids** grâce à `useEffect`. Ça ne sera pas suffisant pour pouvoir afficher les images, mais on y est presque.
Nous allons permettre au serveur de retourner des fichiers images pour pouvoir les afficher dans le HTML.
57
61
58
62
### 5 - Ajouter une action GET côté serveur
59
63
60
-
[💡](/cours/rencontre10.2#-afficher-une-image-sur-le-client) En vous inspirant des notes de cours, retournez le fichier associé à l’id demandé.
64
+
[💡](/notes/rencontre11.1#-afficher-une-image-sur-le-client) En vous inspirant des notes de cours, retournez le fichier associé à l’id demandé.
61
65
62
66
N’oubliez pas de permettre de choisir entre les tailles « large » et « small ».
63
67
64
68
### 6 - Afficher les images côté client
65
69
66
-
[💡](/cours/rencontre10.2#-afficher-une-image-sur-le-client) Dans le HTML, modifiez l’attribut `[src]` pour demander l’image au serveur en format small, pour chaque id d’image existante.
70
+
[💡](/notes/rencontre11.1#-afficher-une-image-sur-le-client) Dans le HTML, modifiez l’attribut `src` pour demander l’image au serveur en format small, pour chaque id d’image existante. (La liste d'ids reçue par le client permet d'afficher chaque image, individuellement, à l'aide d'une requête dans le `src`.)
67
71
68
72
De plus, il faut que cliquer sur une image l’affiche en format large dans un autre onglet. (Utilisez un élément `<a>` et mettez la bonne requête dans son attribut `href`, ça ouvrira une page qui contiendra juste la grande image.)
Pour cette étape, nous allons rendre fonctionnels les petits « X » côté Angular pour supprimer les images.
78
+
Pour cette étape, nous allons rendre fonctionnels les petits « X » côté client pour supprimer les images.
73
79
74
80
### 7 - Ajouter un action DELETE côté serveur
75
81
76
-
[💡](/cours/rencontre10.2#-supprimer-une-image-du-serveur) Inspirez-vous de l’action Delete dans les notes de cours pour trouver l’image dans le **DbContext** et la supprimer. (N’oubliez pas de supprimer ses deux copies sur le disque également)
82
+
[💡](/notes/rencontre11.1#-supprimer-une-image-du-serveur) Inspirez-vous de l’action Delete dans les notes de cours pour trouver l’image dans le **DbContext** et la supprimer. (N’oubliez pas de supprimer ses deux copies sur le disque également)
77
83
78
-
Simplement retourner Ok() est convenable.
84
+
Simplement retourner `Ok()` est convenable.
79
85
80
86
### 8 - Envoyer la requête côté client
81
87
82
-
Il faudra lancer une requête qui fournit simplement l’id de l’image à supprimer.
88
+
Il faudra lancer une requête qui fournit simplement l’id de l’image à supprimer. La requête est déjà prête, il manque seulement un événement `onClick` dans le HTML qui appelle correctement une fonction.
83
89
84
90
## 🍇 Un c'est bien, mais cinquante-douze c'est mieux
85
91
86
-
Pour cette étape, on souhaite permettre à l’utilisateur de poster plusieurs images simultanément plutôt qu’une seule à la fois. Il y aura plusieurs changements à faire pour que ce soit possible.
92
+
Pour cette étape**qui vous servira beaucoup dans le TP4**, on souhaite permettre à l’utilisateur de poster plusieurs images simultanément plutôt qu’une seule à la fois. Il y aura plusieurs changements à faire pour que ce soit possible.
87
93
88
94
### 9 - Modifier le client
89
95
90
-
[💡](/cours/rencontre10.2#-envoyer-un-fichier-au-serveur) Dans l’`<input>` de type file, ajoutez l’attribut HTML `multiple` (il n’a pas de valeur), qui permet de sélectionner plusieurs fichiers à la fois.
96
+
[💡](/notes/rencontre11.1#-envoyer-un-fichier-au-serveur) Dans l’`<input>` de type file, ajoutez l’attribut HTML `multiple` (il n’a pas de valeur), qui permet de sélectionner plusieurs fichiers à la fois.
91
97
92
98
Lorsque vous meublerez le formData, vous allez devoir `.append()` un à plusieurs fichiers maintenant. Comme chaque **clé** doit être unique, visez quelque chose comme `"image0"`, `"image1"`, `"image2"`, etc.
93
99
94
-
Quand il y avait un seul fichier, on allait le chercher avec `.nativeElement.Files[0]`. Pour les suivants, il suffira de remplacer le 0 par 1, puis 2, puis 3, etc. Vous devrez utiliser une boucle for ou while.
100
+
Quand il y avait un seul fichier, on allait le chercher avec `.current.files[0]`. Pour les suivants, il suffira de remplacer le 0 par 1, puis 2, puis 3, etc. ou encore de parcourir `for (let f of ...current.files)`
95
101
96
102
### 10 - Modifier l'action POST du serveur
97
103
98
-
Un peu la même idée que côté Angular : comme on va recevoir un à plusieurs fichiers, il faudra mettre une boucle dans le code et faire `GetFile( … )` jusqu’à ce qu’on ait épuisé tous les fichiers.
104
+
[💡](/notes/rencontre11.1#-sauvegarder-une-image-sur-le-serveur)Un peu la même idée que côté client : comme on va recevoir un à plusieurs fichiers, il faudra mettre une boucle dans le code et faire `GetFile( … )` jusqu’à ce qu’on ait épuisé tous les fichiers.
99
105
100
106
Assurez-vous que ça fonctionne une fois que vous avez terminé.
0 commit comments