add file upload

WildCodeSchool · Jan 6, 2025 · a4d74f9 · a4d74f9
1 parent de65e53
commit a4d74f9
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 67 deletions.
diff --git a/.github/workflows/frontend-tests.yml b/.github/workflows/frontend-tests.yml
@@ -45,3 +45,11 @@ jobs:
           context: "{{defaultContext}}:backend"
           file: Dockerfile.prod
           tags: ${{ secrets.DOCKERHUB_USERNAME }}/wildrent-backend:latest, ${{ secrets.DOCKERHUB_USERNAME }}/wildrent-backend:${{ github.sha }}
+      - name: Launch the security test
+        continue-on-error: true
+        run: npm run zap
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: zap-report
+          path: zap/wrk/index.html
diff --git a/api_gateway/nginx.conf b/api_gateway/nginx.conf
@@ -15,6 +15,10 @@ http {
             proxy_pass http://adminer:8080;
         }
 
+        location /img {
+            proxy_pass http://img:4000;
+        }
+
         location /hmr {
             proxy_pass http://frontend:7000;
             proxy_http_version 1.1;

diff --git a/docker-compose.build.prod.yml b/docker-compose.build.prod.yml
@@ -1,6 +1,6 @@
 services:
   backend:
-    build: 
+    build:
       context: ./backend
       dockerfile: Dockerfile.prod
     env_file:
@@ -14,17 +14,17 @@ services:
       db:
         condition: service_healthy
   frontend:
-      build: 
-        context: ./frontend
-        dockerfile: Dockerfile.prod
-      depends_on:
-        backend:
-          condition: service_healthy
-      healthcheck:
-        test: "curl --fail --request GET --url 'http://localhost:5173' || exit 1"
-        interval: 1s
-        timeout: 2s
-        retries: 100
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.prod
+    depends_on:
+      backend:
+        condition: service_healthy
+    healthcheck:
+      test: "curl --fail --request GET --url 'http://localhost:5173' || exit 1"
+      interval: 1s
+      timeout: 2s
+      retries: 100
   db:
     image: postgres:16.4
     healthcheck:
@@ -45,5 +45,16 @@ services:
         condition: service_healthy
       frontend:
         condition: service_healthy
+      img:
+        condition: service_healthy
     ports:
       - 7000:80
+  img:
+    build:
+      context: ./img
+      dockerfile: Dockerfile.prod
+    healthcheck:
+      test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
+      interval: 1s
+      timeout: 2s
+      retries: 100
diff --git a/docker-compose.e2e.yml b/docker-compose.e2e.yml
@@ -41,8 +41,17 @@ services:
         condition: service_healthy
       frontend:
         condition: service_healthy
+      img:
+        condition: service_healthy
     ports:
       - 7000:80
+  img:
+    build: ./img
+    healthcheck:
+      test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
+      interval: 1s
+      timeout: 2s
+      retries: 100
   e2e:
     build: ./e2e
     volumes:

diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
@@ -39,9 +39,20 @@ services:
         condition: service_healthy
       frontend:
         condition: service_healthy
+      img:
+        condition: service_healthy
     restart: always
     ports:
       - ${GATEWAY_PORT}:80
     volumes:
       - ./nginx.conf:/etc/nginx/nginx.conf
       - ./logs:/var/log/nginx
+  img:
+    build:
+      context: ./img
+      dockerfile: Dockerfile.prod
+    healthcheck:
+      test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
+      interval: 1s
+      timeout: 2s
+      retries: 100
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -45,5 +45,17 @@ services:
         condition: service_healthy
       frontend:
         condition: service_healthy
+      img:
+        condition: service_healthy
     ports:
       - 7000:80
+  img:
+    build: ./img
+    healthcheck:
+      test: "curl --fail --request GET --url 'http://localhost:4000' || exit 1"
+      interval: 1s
+      timeout: 2s
+      retries: 100
+
+volumes:
+  pgdata:
diff --git a/frontend/src/pages/NewProduct.tsx b/frontend/src/pages/NewProduct.tsx
@@ -12,48 +12,8 @@ import axios from "axios";
 const { Title } = Typography;
 
 const NewProduct = () => {
-  const [file, setFile] = useState<File | null>(null); // Changed to File | null
-  const [imageURL, setImageURL] = useState<string | null>(null); // Changed to string | null
-  const [loading, setLoading] = useState<boolean>(false);
-
-  // Handle file selection
-  const handleFileChange = (e: any) => {
-    if (e.target.files && e.target.files[0]) {
-      const selectedFile = e.target.files[0];
-      setFile(selectedFile);
-
-      // Create a preview URL for the file
-      const fileUrl = URL.createObjectURL(selectedFile);
-      setImageURL(fileUrl);
-    }
-  };
-
-  // Handle file upload to the server
-  const handleUpload = async (event: any) => {
-    event.preventDefault();
-    if (!file) {
-      alert("Sélectionnez un fichier à téléverser");
-      return;
-    }
-
-    setLoading(true);
-    const formData = new FormData();
-    formData.append("file", file);
-
-    try {
-      const response = await axios.post("/img", formData, {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      });
-
-      setImageURL(response.data.filename);
-      setLoading(false);
-    } catch (error) {
-      console.error("Erreur lors du téléversement de l'image", error);
-      setLoading(false);
-    }
-  };
+  const [file, setFile] = useState<File | null>(null);
+  const [imageURL, setImageURL] = useState<string | null>(null);
 
   const [createNewProduct] = useCreateNewProductMutation({
     onCompleted(data) {
@@ -71,7 +31,7 @@ const NewProduct = () => {
     const formJson = {
       ...values,
       price: parseInt(values.price, 10),
-      imgUrl: imageURL || "", // Include the image URL
+      imgUrl: imageURL,
     };
 
     try {
@@ -110,22 +70,38 @@ const NewProduct = () => {
             <Form.Item name="imgUrl">
               <div>
                 <input
-                  className="rounded-md"
                   type="file"
-                  onChange={handleFileChange}
+                  onChange={(e) => {
+                    if (e.target.files) {
+                      setFile(e.target.files[0]);
+                    }
+                  }}
                 />
                 <button
-                  onClick={handleUpload}
-                  className="upload-btn"
-                  disabled={loading}
+                  onClick={async (event) => {
+                    event.preventDefault();
+                    if (file) {
+                      const url = "/img";
+                      const formData = new FormData();
+                      formData.append("file", file, file.name);
+                      try {
+                        const response = await axios.post(url, formData);
+                        console.log("response", response);
+                        setImageURL(response.data.filename);
+                      } catch (err) {
+                        console.log("error", err);
+                      }
+                    } else {
+                      alert("select a file to upload");
+                    }
+                  }}
                 >
-                  {loading ? "Téléversement..." : "Téléverser l'image"}
+                  Upload Image
                 </button>
-
                 {imageURL ? (
                   <>
                     <br />
-                    <img width={500} alt="uploadedImg" src={imageURL} />
+                    <img width={"500"} alt="uploadedImg" src={imageURL} />
                     <br />
                   </>
                 ) : null}

diff --git a/img/package-lock.json b/img/package-lock.json
diff --git a/img/package.json b/img/package.json
@@ -12,11 +12,13 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@types/cors": "^2.8.17",
-    "@types/multer": "^1.4.12",
     "cors": "^2.8.5",
     "express": "^4.21.2",
     "multer": "^1.4.5-lts.1",
     "ts-node-dev": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/multer": "^1.4.12"
   }
 }