Merge pull request #562 from Suvadip-sana/set-image-upload-newlist

Set the limit of 4 file input in `new.ejs` file

app.js

@@ -228,7 +228,7 @@ const bookingController = require('./controllers/booking.js');
 app.get("/listing/new", isLoggedIn, asyncwrap(listingController.newpost));
 // Listing routes
 app.get("/listing", asyncwrap(index));
-app.post("/listing", upload.array('listing[image]', 10), isLoggedIn, asyncwrap(createpost));
+app.post("/listing", upload.array('listing[image]', 4), isLoggedIn, asyncwrap(createpost));
 app.post("/listing/search", asyncwrap(search));
 app.get("/listing/:id/edit", isLoggedIn, isOwner, asyncwrap(editpost));
 app.put('/listing/:id', isLoggedIn, isOwner, upload.array('listing[image]', 10), asyncwrap(saveEditpost));

public/css/styles.css

@@ -961,3 +961,14 @@ font-size: 0.8rem !important;
       text-wrap: nowrap;
     }
   }
+#fileError{
+
+}
+
+.nomal-error{
+  color: inherit !important;
+}
+
+.alert-error{
+  color: #ff002f !important;
+}

public/js/script.js

@@ -146,4 +146,30 @@ const tagAlert = document.querySelector('.tag-alert');
                 tagAlert.classList.add("normal-tag-alert");
             }
         });
-    });
+    });
+
+
+// Set limi of 4 max file upload
+// Maximum number of files allowed
+const maxFiles = 4;
+
+// Get input and error message elements
+const listingImageInput = document.getElementById('fileInput');
+const fileError = document.getElementById('fileError');
+
+// Listen for changes on the file input
+listingImageInput.addEventListener('change', function() {
+    // Check the number of files selected
+    if (this.files.length > maxFiles) {
+        // Display error message
+        fileError.classList.remove("nomal-error");
+        fileError.classList.add("alert-error");
+
+        // Clear the input field to reset file selection
+        this.value = '';
+    } else {
+        // Clear error message if file count is within the limit
+        fileError.classList.remove("alert-error");
+        fileError.classList.add("nomal-error");
+    }
+});

views/new.ejs

@@ -123,7 +123,7 @@
                     <label for="images" class="form-label">Upload Images</label>
                     <input type="file" name="listing[image]" class="form-control" id="fileInput" multiple required>
                     <div class="invalid-feedback">Please upload at least one image!</div>
-                    <small class="form-text text-muted">You can upload multiple images.</small>
+                    <small class="form-text text-muted">You can upload multiple <images id="fileError" class="">(Maximum 4)</images></small>
                     <div class="valid-feedback">Looks good!</div>
                 </div>
 
@@ -179,18 +179,25 @@
 
     <!-- JS for image preview -->
     <script>
+        const filesMax = 4; // Maximum allowed files
         const fileInput = document.getElementById("fileInput");
         const fileList = []; // Array to hold selected files
 
         fileInput.addEventListener("change", function (event) {
         const files = Array.from(event.target.files);
-        
-        // Add new files to the fileList
-        fileList.push(...files);
+        if (files.length + fileList.length > filesMax) {
+            fileList.length = 0; // Clear the file list array
+            displayPreview(); // Clear the preview display
+        }
+        else{
+            // Add new files to the fileList
+            fileList.push(...files);
 
-        // Display preview and update the file input to include all selected files
-        displayPreview();
-        updateFileInput();
+            // Display preview and update the file input to include all selected files
+            displayPreview();
+            updateFileInput();
+        }
+        
         });
 
         function displayPreview() {