Start work on adding meta data to images
This commit is contained in:
parent
acfcba4d82
commit
50881fc943
@ -1,5 +1,6 @@
|
|||||||
import { Button } from "@nextui-org/react";
|
import { Button } from "@nextui-org/react";
|
||||||
import moment from "moment/moment";
|
import moment from "moment/moment";
|
||||||
|
import { NextSeo } from "next-seo";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { getFileInfo } from "src/utils/helpers/fileHelpers";
|
import { getFileInfo } from "src/utils/helpers/fileHelpers";
|
||||||
@ -22,19 +23,24 @@ export default function File(props) {
|
|||||||
size,
|
size,
|
||||||
} = file;
|
} = file;
|
||||||
|
|
||||||
|
const metaData = <NextSeo title={`${fileId}.${ext}`} />;
|
||||||
|
|
||||||
let toShow;
|
let toShow;
|
||||||
if (!isValidFile) {
|
if (!isValidFile) {
|
||||||
return (
|
return (
|
||||||
<div className="h-screen flex items-center justify-center">
|
<>
|
||||||
<div className="flex flex-col text-center items-center justify-center">
|
{metaData}
|
||||||
<h1 className="text-red-500 text-3xl mb-5">Invalid File</h1>
|
<div className="h-screen flex items-center justify-center">
|
||||||
<Link href="/">
|
<div className="flex flex-col text-center items-center justify-center">
|
||||||
<Button auto className="bg-blue-600">
|
<h1 className="text-red-500 text-3xl mb-5">Invalid File</h1>
|
||||||
Go Home
|
<Link href="/">
|
||||||
</Button>
|
<Button auto className="bg-blue-600">
|
||||||
</Link>
|
Go Home
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (isValidFile) {
|
if (isValidFile) {
|
||||||
@ -56,28 +62,35 @@ export default function File(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen flex items-center justify-center">
|
<>
|
||||||
<div className="flex flex-col items-center justify-center">
|
{metaData}
|
||||||
<h1 className="font-bold text-lg">
|
<div className="h-screen flex items-center justify-center">
|
||||||
{originalFileName} ({fileId}.{ext})
|
<div className="flex flex-col items-center justify-center">
|
||||||
</h1>
|
<h1 className="font-bold text-lg">
|
||||||
<h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3>
|
{originalFileName} ({fileId}.{ext})
|
||||||
<h3>
|
</h1>
|
||||||
Uploader: <span className="font-bold">{uploader.username}</span> -{" "}
|
<h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3>
|
||||||
{formatBytes(size)}
|
<h3>
|
||||||
</h3>
|
Uploader: <span className="font-bold">{uploader.username}</span> -{" "}
|
||||||
<div className="md:w-4/6 md:h-4/6 sm:w-fit sm:h-fit mt-3">{toShow}</div>
|
{formatBytes(size)}
|
||||||
<Button
|
</h3>
|
||||||
auto
|
<div className="md:max-w-[70%] sm:w-fit sm:h-fit mt-3 items-center justify-center">
|
||||||
className="bg-blue-600 mt-5"
|
{toShow}
|
||||||
onPress={() => {
|
</div>
|
||||||
downloadURI(fileUrl, `${fileId}.${ext}`);
|
{!toShow ? (
|
||||||
}}
|
<Button
|
||||||
>
|
auto
|
||||||
Download
|
className="bg-blue-600 mt-5"
|
||||||
</Button>
|
onPress={() => {
|
||||||
|
downloadURI(fileUrl, `${fileId}.${ext}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Download
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user