add moment and child_process
This commit is contained in:
parent
a20f6c88c9
commit
63c94365ce
@ -11,10 +11,12 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/react": "^1.0.0-beta.10",
|
"@nextui-org/react": "^1.0.0-beta.10",
|
||||||
"bcrypt": "^5.1.0",
|
"bcrypt": "^5.1.0",
|
||||||
|
"child_process": "^1.0.2",
|
||||||
"eslint": "8.27.0",
|
"eslint": "8.27.0",
|
||||||
"eslint-config-next": "13.0.3",
|
"eslint-config-next": "13.0.3",
|
||||||
"ffprobe": "^1.1.2",
|
"ffprobe": "^1.1.2",
|
||||||
"ffprobe-static": "^3.1.0",
|
"ffprobe-static": "^3.1.0",
|
||||||
|
"moment": "^2.29.4",
|
||||||
"mongoose": "^6.7.2",
|
"mongoose": "^6.7.2",
|
||||||
"multer": "^1.4.5-lts.1",
|
"multer": "^1.4.5-lts.1",
|
||||||
"next": "13.0.3",
|
"next": "13.0.3",
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
export default function Layout({ children }) {
|
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>;
|
||||||
}
|
}
|
||||||
|
@ -3,9 +3,11 @@ import mongoose, { Schema } from "mongoose";
|
|||||||
const schema = new Schema({
|
const schema = new Schema({
|
||||||
uploader: mongoose.Types.ObjectId,
|
uploader: mongoose.Types.ObjectId,
|
||||||
fileId: String,
|
fileId: String,
|
||||||
|
originalFileName: String,
|
||||||
uploadDate: Date,
|
uploadDate: Date,
|
||||||
contentType: String,
|
contentType: String,
|
||||||
ext: String,
|
ext: String,
|
||||||
|
size: Number,
|
||||||
|
|
||||||
// Image/Video specific properties
|
// Image/Video specific properties
|
||||||
width: Number, // The width of the image/video in pixels
|
width: Number, // The width of the image/video in pixels
|
||||||
|
@ -1,31 +1,77 @@
|
|||||||
import { Button } from "@nextui-org/react";
|
import { Button } from "@nextui-org/react";
|
||||||
|
import moment from "moment/moment";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
import { getFileInfo } from "src/utils/helpers/fileHelpers";
|
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) {
|
export default function File(props) {
|
||||||
const { isValidFile, fileData } = props;
|
const { isValidFile, fileData } = props;
|
||||||
const file = JSON.parse(fileData);
|
const file = JSON.parse(fileData);
|
||||||
let { uploader, fileId, uploadDate, contentType, fileUrl, width, height } =
|
let {
|
||||||
file;
|
fileId,
|
||||||
contentType = contentType.toLowerCase();
|
originalFileName,
|
||||||
|
uploadDate,
|
||||||
if (isValidFile === false) {
|
contentType,
|
||||||
return "invalid file";
|
fileUrl,
|
||||||
}
|
width,
|
||||||
|
height,
|
||||||
|
ext,
|
||||||
|
size,
|
||||||
|
} = file;
|
||||||
|
|
||||||
let toShow;
|
let toShow;
|
||||||
if (contentType.includes("image")) {
|
if (!isValidFile) {
|
||||||
toShow = (
|
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>;
|
if (isValidFile) {
|
||||||
} else {
|
contentType = contentType.toLowerCase();
|
||||||
<Button>Download</Button>;
|
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 (
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -84,6 +84,7 @@ export async function createFile(
|
|||||||
const file = await FileModel.create({
|
const file = await FileModel.create({
|
||||||
uploader: uploader._id,
|
uploader: uploader._id,
|
||||||
fileId: fileId,
|
fileId: fileId,
|
||||||
|
originalFileName: fileName,
|
||||||
uploadDate: new Date(),
|
uploadDate: new Date(),
|
||||||
contentType: contentType,
|
contentType: contentType,
|
||||||
ext: extention,
|
ext: extention,
|
||||||
|
@ -14,3 +14,22 @@ export function randomString(length) {
|
|||||||
}
|
}
|
||||||
return result;
|
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]}`;
|
||||||
|
}
|
||||||
|
8
src/utils/helpers/webUtils.js
Normal file
8
src/utils/helpers/webUtils.js
Normal file
@ -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);
|
||||||
|
}
|
10
yarn.lock
10
yarn.lock
@ -2025,6 +2025,11 @@ chalk@^4.0.0:
|
|||||||
ansi-styles "^4.1.0"
|
ansi-styles "^4.1.0"
|
||||||
supports-color "^7.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:
|
chokidar@^3.5.3:
|
||||||
version "3.5.3"
|
version "3.5.3"
|
||||||
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
|
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"
|
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
|
||||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
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:
|
mongodb-connection-string-url@^2.5.4:
|
||||||
version "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"
|
resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-2.5.4.tgz#1ee2496f4c4eae64f63c4b2d512aebc89996160a"
|
||||||
|
Reference in New Issue
Block a user