diff --git a/package.json b/package.json index 43bc052..2c2302c 100644 --- a/package.json +++ b/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", diff --git a/src/components/Layout.js b/src/components/Layout.js index 08d0d4c..ecfa82c 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -1,3 +1,3 @@ export default function Layout({ children }) { - return
{children}
; + return
{children}
; } diff --git a/src/models/FileModel.js b/src/models/FileModel.js index 2740a73..8454dbd 100644 --- a/src/models/FileModel.js +++ b/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 diff --git a/src/pages/files/[fileId].js b/src/pages/files/[fileId].js index 234c7df..a30f321 100644 --- a/src/pages/files/[fileId].js +++ b/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 = ( - {fileId} + <> +

Invalid File

+ + + + ); - } else if (contentType.includes("video")) { - toShow = ; - } else { - ; + } + if (isValidFile) { + contentType = contentType.toLowerCase(); + if (contentType.includes("image")) { + toShow = ( + {fileId} + ); + } else if (contentType.includes("video")) { + toShow = ; + } else { + toShow = ( + + ); + } } return ( -
{toShow}
+
+
+ {isValidFile ? ( +
+

+ {originalFileName} ({fileId}.{ext}) +

+

{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}

+

{formatBytes(size)}

+
+ ) : null} + {toShow} +
+
); } diff --git a/src/utils/helpers/fileHelpers.js b/src/utils/helpers/fileHelpers.js index b541741..7a8938b 100644 --- a/src/utils/helpers/fileHelpers.js +++ b/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, diff --git a/src/utils/helpers/stringHelpers.js b/src/utils/helpers/stringHelpers.js index a7e6e03..90d8fba 100644 --- a/src/utils/helpers/stringHelpers.js +++ b/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]}`; +} diff --git a/src/utils/helpers/webUtils.js b/src/utils/helpers/webUtils.js new file mode 100644 index 0000000..848c57b --- /dev/null +++ b/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); +} diff --git a/yarn.lock b/yarn.lock index 5f11b37..d31a9eb 100644 --- a/yarn.lock +++ b/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"