Image preview and images for items (wip)

GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Dropdown } from "react-bootstrap";
 import { Button } from "react-bootstrap";
 
@@ -12,14 +12,36 @@ const Ajouter = ({ onCreation }) => {
     const [price, setPrice] = useState("");
     const [promoPrice, setPromoPrice] = useState("");
     const [quantity, setQuantity] = useState("");
-    const [imageName, setImageName] = useState("sqdc.jpg");
     const [status, setStatusValue] = useState(0);
 
+    const [imageFile, setImage] = useState(null);
+    const [imageUrl, setImageUrl] = useState(null);
+
+
+    useEffect(() => {
+
+        if (imageFile)
+            setImageUrl(URL.createObjectURL(imageFile));
+        else
+            setImageUrl(null);
+
+    }, [imageFile]);
+
     const handleSubmit = (e) => {
         e.preventDefault(); // Empêcher de reloader la page au submit.
 
         // Appeler le comportement onCreation
-        onCreation({ title, description, category, price, promoPrice, quantity, imageName, status });
+        onCreation({
+            title: title,
+            description: description,
+            category: category,
+            price: price,
+            promoPrice: promoPrice,
+            quantity: quantity,
+            imageFile: imageFile,
+            imageName: "noName.jpg",
+            status: status
+        });
 
         // Reset les états du formulaire.
         setTitle("");
@@ -28,7 +50,15 @@ const Ajouter = ({ onCreation }) => {
         setPrice("");
         setPromoPrice("");
         setQuantity("");
-        setImageName("sqdc.jpg");
+        setImage(null);
+        setImageUrl(null);
+    }
+
+    const handleImageChange = (e) => {
+        if (e.target.files && e.target.files[0])
+            setImage(e.target.files[0]);
+        else
+            setImage(null);
     }
 
     return (
@@ -78,11 +108,16 @@ const Ajouter = ({ onCreation }) => {
                         onChange={(e) => setQuantity(e.target.value)} />
                 </div>
                 <div className="form-group">
-                    <label>Nom Image: </label>
-                    <input type='text' className="form-control form-input"
-                        placeholder="Nom de l'image..."
-                        value={imageName}
-                        onChange={(e) => setImageName(e.target.value)} />
+                    <label>Image: </label>
+                    <input
+                        className="form-control form-input"
+                        type='file'
+                        accept="image/*"
+                        onChange={(e) => handleImageChange(e)} />
+                    {imageUrl && <div className="img-preview-container">
+                        <img className="img-preview" src={imageUrl} />
+                    </div>}
+
                 </div>
                 <div className="form-group">
                     <label>Status: </label>

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -543,6 +543,16 @@ html {
     border-radius: 5px;
 }
 
+.img-preview-container{
+    margin-top: 15px;
+    display:flex;
+}
+
+.img-preview{
+    margin:auto;
+    max-width: 90%;
+    max-height: 200px;
+}
 
 .sorting-container {
     width: 20%;