Add support for many file types

Author: zachspang

backend/internal/entity/content.go

@@ -7,6 +7,7 @@ type Content struct {
 	Title    string `gorm:"size:255;not null;" json:"title"`
 	Path     string `gorm:"size:255;not null;" json:"path"`
 	Body     string `gorm:"size:2000;" json:"body"`
+	Type     string `gorm:"size:255;not null;" json:"type"`
 	ModuleID uint
 	Module   Module `gorm:"foreignKey:ModuleID;references:ID" json:"-"`
 }

backend/internal/handlers/courses.go

@@ -352,6 +352,12 @@ func EditContent(c *fiber.Ctx) error {
 		if err := database.DB.Model(&content).Update("path", path).Error; err != nil{
 			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
 		}
+
+		// Add the type
+		filetype := file.Header.Get("Content-Type")
+		if err := database.DB.Model(&content).Update("type", filetype).Error; err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
 	}
 
 	return c.JSON(fiber.Map{

frontend/src/components/pages/Content.js

@@ -130,6 +130,18 @@ export function Content() {
         );
     }
 
+    let attachment = null;
+    if (contentInfo.path !== "") {
+        let mediaType = contentInfo.type.split("/")[0];
+        if (mediaType === "image") {
+            attachment = <img src={process.env.PUBLIC_URL + "/content" + contentInfo.path} alt="Uploaded File"/>
+        } else if (mediaType === "video") {
+            attachment = <iframe src={process.env.PUBLIC_URL + "/content" + contentInfo.path} className="w-screen lg:max-w-5xl max-w-[90%] aspect-video" title="Uploaded File"/> 
+        } else {
+            attachment = <iframe src={process.env.PUBLIC_URL + "/content" + contentInfo.path} className="w-[82vw] h-[82vh]" title="Uploaded File"/> 
+        }
+    } 
+
     return (
         <div className="p-6">
             <div className="flex justify-between">
@@ -144,10 +156,7 @@ export function Content() {
             <div>
                 {contentInfo.body}
             </div>
-            {contentInfo.path !== "" ?
-                <img src={process.env.PUBLIC_URL + "/content" + contentInfo.path} alt=""/> : null
-            }
+            {attachment}
         </div>
-
     );
 }