image

client/src/pages/CreateEventsPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
 import NextUIFormikInput from "../components/NextUIFormikInput";
 import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
 import config from "../config";
+import InsertImage from "../components/InsertImage";
 import { ArrowUTurnLeftIcon } from "../icons";
 
 // Validation schema
@@ -36,13 +37,12 @@ const validationSchema = Yup.object({
   slotsAvailable: Yup.number()
     .integer()
     .required("Slots Available is required"),
-  imageUrl: Yup.string()
+  evtPicture: Yup.mixed().required("Event picture is required"),
-    .url("Invalid URL format")
-    .required("Image URL is required"),
 });
 
 const CreateEventsPage = () => {
   const [townCouncils, setTownCouncils] = useState<string[]>([]);
+  const [imageFile, setImageFile] = useState<File | null>(null); // State to handle image file
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -66,23 +66,41 @@ const CreateEventsPage = () => {
     location: "",
     category: "",
     slotsAvailable: "",
-    imageUrl: "",
+    evtPicture: null, // Initialize with null
   };
 
   const handleSubmit = async (
     values: any,
     { setSubmitting, resetForm, setFieldError }: any
   ) => {
-    console.log("Submitting form with values:", values); // Debug log
+    const formData = new FormData();
+    formData.append("title", values.title);
+    formData.append("description", values.description);
+    formData.append("date", values.date);
+    formData.append("time", values.time);
+    formData.append("location", values.location);
+    formData.append("category", values.category);
+    formData.append("slotsAvailable", values.slotsAvailable);
+
+    if (imageFile) {
+      formData.append("evtPicture", imageFile); // Append image file to form data
+    }
+
     try {
       const response = await axios.post(
         config.serverAddress + "/events",
-        values
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
       );
       console.log("Server response:", response); // Debug log
       if (response.status === 200 || response.status === 201) {
         console.log("Event created successfully:", response.data);
         resetForm(); // Clear form after successful submit
+        setImageFile(null); // Reset image file state
         navigate(-1);
       } else {
         console.error("Error creating event:", response.statusText);
@@ -173,18 +191,19 @@ const CreateEventsPage = () => {
                 placeholder="Enter slots available"
                 labelPlacement="inside"
               />
-              <NextUIFormikInput
+              <div className="mb-4">
-                label="Image URL"
+                <InsertImage
-                name="imageUrl"
+                  onImageSelected={(file) => {
-                type="text"
+                    setImageFile(file); // Set image file
-                placeholder="Enter image URL"
+                    setFieldValue("evtPicture", file); // Set form field value
-                labelPlacement="inside"
+                  }}
                 />
+              </div>
               <div className="flex flex-row-reverse border">
                 <Button
                   type="submit"
                   className="bg-red-600 text-white text-xl w-1/6"
-                  disabled={!isValid || !dirty || isSubmitting}
+                  disabled={!isValid || !dirty || isSubmitting || !imageFile}
                 >
                   <p>Create Event</p>
                 </Button>

client/src/pages/EventsPage.tsx

@@ -19,7 +19,7 @@ interface Event {
   location: string;
   time: string;
   description: string;
-  imageUrl: string;
+  evtPicture: string; // Changed to evtPicture
 }
 
 const EventsPage: React.FC = () => {
@@ -110,7 +110,7 @@ const EventsPage: React.FC = () => {
               value={selectedTownCouncil}
               onChange={(e) => setSelectedTownCouncil(e.target.value)}
             >
-              <option value="">All location</option>
+              <option value="">All locations</option>
               {townCouncils.map((townCouncil) => (
                 <option key={townCouncil} value={townCouncil}>
                   {townCouncil}
@@ -136,18 +136,32 @@ const EventsPage: React.FC = () => {
             <p className="text-gray-600">No events available.</p>
           ) : (
             filteredEvents.map((event) => (
-              <Card key={event.id}>
+              <Card key={event.id}
+              style={{
+                maxWidth: '600px',
+                height: 'auto',
+                minHeight: '300px',
+                display: 'flex',
+                flexDirection: 'column',
+              }}>
                 <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                   <h4 className="font-bold text-large">{event.title}</h4>
                 </CardHeader>
                 <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
+                  {event.evtPicture && (
+                    <div className="relative w-full" style={{ paddingBottom: '56.25%' /* 16:9 aspect ratio */ }}>
                       <Image
                         alt={event.title}
-                    className="object-cover rounded-xl"
+                        src={`${config.serverAddress}/events/evtPicture/${event.id}`}
-                    src={event.imageUrl}
+                        style={{
-                    width="100%"
+                          height: '100%',
-                    height={180}
+                          width: '100%',
+                          objectFit: 'cover',
+                          borderRadius: '0.375rem',
+                        }}
                       />
+                    </div>
+                  )}
                 </CardBody>
                 <CardFooter className="flex flex-col items-start p-4">
                   <p className="text-gray-600 mb-4">{event.description}</p>

client/src/pages/ManageEventsPage.tsx

@@ -64,12 +64,29 @@ const ManageEventsPage = () => {
           {events.map((event) => (
             <TableRow key={event.id}>
               <TableCell>
-                <div className="flex items-center">
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                  <Avatar
+                {event.evtPicture && (
-                    src={`${config.serverAddress}${event.imageUrl}`}
+                  <div style={{
-                    className="mr-4"
+                    width: '100px',
+                    height: '100px',
+                    overflow: 'hidden',
+                    borderRadius: '8px',
+                    position: 'relative'
+                  }}>
+                    <img
+                      src={`${config.serverAddress}/events/evtPicture/${event.id}`}
+                      alt="Event Picture"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        position: 'absolute',
+                        top: 0,
+                        left: 0
+                      }}
                     />
-                  {event.title}
+                </div>
+                )}
               </div>
               </TableCell>
               <TableCell>{new Date(event.date).toLocaleDateString()}</TableCell>

server/models/Events.js

@@ -29,7 +29,11 @@ module.exports = (sequelize)  => {
     slotsAvailable: {
       type: DataTypes.INTEGER,
       allowNull: false,
-    }
+    },
+    evtPicture: {
+      type: DataTypes.BLOB("long"),
+      allowNull: true,
+    },
   }, {
     tableName: "events",
     timestamps: true,

server/routes/events.js

@@ -2,28 +2,38 @@ const express = require('express');
 const router = express.Router();
 const { Events } = require('../models');
 const multer = require('multer');
+const { Op } = require("sequelize");
 const path = require('path');
 const yup = require('yup');
+const sharp = require("sharp");
+
+const upload = multer({ storage: multer.memoryStorage() });
+
+router.post("/", upload.fields([
+    { name: 'evtPicture', maxCount: 1 },
+]), async (req, res) => {
 
-router.post("/", async (req, res) => {
     let data = req.body;
-    console.log("Incoming data:", data); // Log incoming data
+    let files = req.files;// Log incoming data
-    const validationSchema = yup.object({
+    
+    let validationSchema = yup.object({
         title: yup.string().trim().min(3).max(100).required(),
         description: yup.string().trim().min(3).max(500).required(),
         date: yup.date().required(),
         time: yup.string().required(),
         location: yup.string().required(),
         category: yup.string().required(),
-        imageUrl: yup.string(),
         slotsAvailable: yup.number().integer().required(),
     });
 
     try {
         data = await validationSchema.validate(data, { abortEarly: false });
-        console.log("Validated data:", data); // Log validated data
+
-        const result = await Events.create(data);
+        // Process valid data
-        console.log("Event created:", result); // Log successful creation
+        let evtPicture = files.evtPicture[0].buffer;
+
+        let result = await Events.create({ ...data, evtPicture });
+
         res.json(result);
     } catch (err) {
         console.error("Validation error:", err); // Log the validation error
@@ -31,11 +41,9 @@ router.post("/", async (req, res) => {
     }
 });
   
-const upload = multer({ storage: multer.memoryStorage() });
-  
   router.get("/", async (req, res) => {
     try {
-      const list = await Events.findAll({
+      let list = await Events.findAll({
         order: [['createdAt', 'DESC']],
       });
       res.json(list);
@@ -55,6 +63,25 @@ router.get("/:id", async (req, res) => {
     res.json(event);
 });
 
+router.get("/evtPicture/:id", async (req, res) => {
+    let id = req.params.id;
+    let events = await Events.findByPk(id);
+
+    if (!events || !events.evtPicture) {
+        res.sendStatus(404);
+        return;
+    }
+
+    try {
+        res.set("Content-Type", "image/jpeg"); 
+        res.send(events.evtPicture);
+    } catch (err) {
+        res
+            .status(500)
+            .json({ message: "Error retrieving image", error: err });
+    }
+});
+
 router.put("/:id", async (req, res) => {
     const id = req.params.id;
     let data = req.body;