add moment and child_process

package.json

@@ -11,10 +11,12 @@
   "dependencies": {
     "@nextui-org/react": "^1.0.0-beta.10",
     "bcrypt": "^5.1.0",
+    "child_process": "^1.0.2",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",
     "ffprobe": "^1.1.2",
     "ffprobe-static": "^3.1.0",
+    "moment": "^2.29.4",
     "mongoose": "^6.7.2",
     "multer": "^1.4.5-lts.1",
     "next": "13.0.3",

src/components/Layout.js

@@ -1,3 +1,3 @@
 export default function Layout({ children }) {
-	return <div className="h-screen bg-[#080808]">{children}</div>;
+	return <div className="h-screen bg-[#080808] text-white">{children}</div>;
 }

src/models/FileModel.js

@@ -3,9 +3,11 @@ import mongoose, { Schema } from "mongoose";
 const schema = new Schema({
 	uploader: mongoose.Types.ObjectId,
 	fileId: String,
+	originalFileName: String,
 	uploadDate: Date,
 	contentType: String,
 	ext: String,
+	size: Number,
 
 	// Image/Video specific properties
 	width: Number, // The width of the image/video in pixels

src/pages/files/[fileId].js

@@ -1,31 +1,77 @@
 import { Button } from "@nextui-org/react";
+import moment from "moment/moment";
 import Image from "next/image";
+import Link from "next/link";
 import { getFileInfo } from "src/utils/helpers/fileHelpers";
+import { formatBytes } from "src/utils/helpers/stringHelpers";
+import { downloadURI } from "src/utils/helpers/webUtils";
 
 export default function File(props) {
 	const { isValidFile, fileData } = props;
 	const file = JSON.parse(fileData);
-	let { uploader, fileId, uploadDate, contentType, fileUrl, width, height } =
-		file;
-	contentType = contentType.toLowerCase();
-
-	if (isValidFile === false) {
-		return "invalid file";
-	}
+	let {
+		fileId,
+		originalFileName,
+		uploadDate,
+		contentType,
+		fileUrl,
+		width,
+		height,
+		ext,
+		size,
+	} = file;
 
 	let toShow;
-	if (contentType.includes("image")) {
+	if (!isValidFile) {
 		toShow = (
-			<Image alt={fileId} src={fileUrl} width={width} height={height}></Image>
+			<>
+				<h1 className="text-red-500 text-3xl mb-5">Invalid File</h1>
+				<Link href="/">
+					<Button auto className="bg-blue-600">
+						Go Home
+					</Button>
+				</Link>
+			</>
 		);
-	} else if (contentType.includes("video")) {
-		toShow = <video alt={fileId} src={fileUrl} controls></video>;
-	} else {
-		<Button>Download</Button>;
+	}
+	if (isValidFile) {
+		contentType = contentType.toLowerCase();
+		if (contentType.includes("image")) {
+			toShow = (
+				<Image alt={fileId} src={fileUrl} width={width} height={height}></Image>
+			);
+		} else if (contentType.includes("video")) {
+			toShow = <video alt={fileId} src={fileUrl} controls></video>;
+		} else {
+			toShow = (
+				<Button
+					auto
+					className="bg-blue-600"
+					onPress={() => {
+						downloadURI(fileUrl, originalFileName);
+					}}
+				>
+					Download
+				</Button>
+			);
+		}
 	}
 
 	return (
-		<div className="h-screen flex items-center justify-center">{toShow}</div>
+		<div className="h-screen flex items-center justify-center">
+			<div className="flex flex-col text-center items-center justify-center">
+				{isValidFile ? (
+					<div className="mb-4">
+						<h1 className="font-bold text-lg">
+							{originalFileName} ({fileId}.{ext})
+						</h1>
+						<h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3>
+						<h3>{formatBytes(size)}</h3>
+					</div>
+				) : null}
+				{toShow}
+			</div>
+		</div>
 	);
 }
 

src/utils/helpers/fileHelpers.js

@@ -84,6 +84,7 @@ export async function createFile(
 	const file = await FileModel.create({
 		uploader: uploader._id,
 		fileId: fileId,
+		originalFileName: fileName,
 		uploadDate: new Date(),
 		contentType: contentType,
 		ext: extention,

src/utils/helpers/stringHelpers.js

@@ -14,3 +14,22 @@ export function randomString(length) {
 	}
 	return result;
 }
+
+/**
+ * Returns the given bytes formatted
+ *
+ * @param {Number} bytes The bytes amount
+ * @param {Number} decimals The amount of decimals to show
+ * @returns
+ */
+export function formatBytes(bytes, decimals = 2) {
+	if (!+bytes) return "0 Bytes";
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}

src/utils/helpers/webUtils.js

@@ -0,0 +1,8 @@
+export function downloadURI(uri, name) {
+	var link = document.createElement("a");
+	link.download = name;
+	link.href = uri;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+}

yarn.lock

@@ -2025,6 +2025,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+child_process@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/child_process/-/child_process-1.0.2.tgz#b1f7e7fc73d25e7fd1d455adc94e143830182b5a"
+  integrity sha512-Wmza/JzL0SiWz7kl6MhIKT5ceIlnFPJX+lwUGj7Clhy5MMldsSoJR0+uvRzOS5Kv45Mq7t1PoE8TsOA9bzvb6g==
+
 chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
@@ -3159,6 +3164,11 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 mongodb-connection-string-url@^2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-2.5.4.tgz#1ee2496f4c4eae64f63c4b2d512aebc89996160a"