upload page

This commit is contained in:
amy 2024-12-03 23:06:22 +03:30
parent 23d05febfa
commit 58ede7284c
Signed by: amy
SSH key fingerprint: SHA256:Y6VEv6ZOxI6zqjjOF4luhfaCoY+zDK0w62P+qhQYie4
8 changed files with 96 additions and 40 deletions

7
.idea/discord.xml generated Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
</component>
</project>

11
.idea/workspace.xml generated
View file

@ -5,9 +5,11 @@
</component>
<component name="ChangeListManager">
<list default="true" id="4cc93404-63bf-4aee-bd04-2b0203a508b3" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/app/helpers.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/app/main.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/app/images/upload/page.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/next.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/next.config.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/images/upload/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/images/upload/page.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/page.tsx" afterDir="false" />
</list>
@ -20,6 +22,7 @@
<option name="RECENT_TEMPLATES">
<list>
<option value="TypeScript JSX File" />
<option value="TypeScript File" />
</list>
</option>
</component>
@ -73,7 +76,9 @@
<workItem from="1733200504378" duration="23000" />
<workItem from="1733232865117" duration="6000" />
<workItem from="1733238983600" duration="81000" />
<workItem from="1733239451427" duration="4696000" />
<workItem from="1733239451427" duration="6396000" />
<workItem from="1733250368879" duration="1956000" />
<workItem from="1733252479518" duration="1692000" />
</task>
<servers />
</component>

View file

@ -1,7 +1,16 @@
import type { NextConfig } from "next";
import dotenv from 'dotenv';
dotenv.config();
if (!process.env.API_URL){
console.error("no api url provided");
process.exit(1);
}
const nextConfig: NextConfig = {
/* config options here */
env: {
NEXT_PUBLIC_API_URL: process.env.API_URL,
}
};
export default nextConfig;

View file

@ -10,6 +10,7 @@
},
"dependencies": {
"@radix-ui/themes": "^3.1.6",
"dotenv": "^16.4.7",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106"

27
pnpm-lock.yaml generated
View file

@ -11,6 +11,9 @@ importers:
'@radix-ui/themes':
specifier: ^3.1.6
version: 3.1.6(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
dotenv:
specifier: ^16.4.7
version: 16.4.7
next:
specifier: 15.0.3
version: 15.0.3(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
@ -1124,6 +1127,10 @@ packages:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
dotenv@16.4.7:
resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
engines: {node: '>=12'}
emoji-regex@9.2.2:
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@ -3183,6 +3190,8 @@ snapshots:
dependencies:
esutils: 2.0.3
dotenv@16.4.7: {}
emoji-regex@9.2.2: {}
enhanced-resolve@5.17.1:
@ -3293,8 +3302,8 @@ snapshots:
'@typescript-eslint/parser': 8.17.0(eslint@8.57.1)(typescript@5.7.2)
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
eslint-plugin-react: 7.37.2(eslint@8.57.1)
eslint-plugin-react-hooks: 5.0.0(eslint@8.57.1)
@ -3313,37 +3322,37 @@ snapshots:
transitivePeerDependencies:
- supports-color
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1):
dependencies:
'@nolyfill/is-core-module': 1.0.39
debug: 4.3.7
enhanced-resolve: 5.17.1
eslint: 8.57.1
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
fast-glob: 3.3.2
get-tsconfig: 4.8.1
is-bun-module: 1.3.0
is-glob: 4.0.3
optionalDependencies:
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
transitivePeerDependencies:
- '@typescript-eslint/parser'
- eslint-import-resolver-node
- eslint-import-resolver-webpack
- supports-color
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
dependencies:
debug: 3.2.7
optionalDependencies:
'@typescript-eslint/parser': 8.17.0(eslint@8.57.1)(typescript@5.7.2)
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1)
transitivePeerDependencies:
- supports-color
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
dependencies:
'@rtsao/scc': 1.1.0
array-includes: 3.1.8
@ -3354,7 +3363,7 @@ snapshots:
doctrine: 2.1.0
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.17.0(eslint@8.57.1)(typescript@5.7.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
hasown: 2.0.2
is-core-module: 2.15.1
is-glob: 4.0.3

View file

@ -0,0 +1,12 @@
.page {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mainpage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

View file

@ -1,11 +1,15 @@
"use client";
import "@radix-ui/themes/styles.css";
import {useState} from "react";
import './page.css'
import {getCookie} from "@/app/helpers";
import {Button, Theme} from "@radix-ui/themes";
export default function Page() {
const API_URL = process.env.NEXT_PUBLIC_API_URL as string;
const [file, setFile] = useState(null);
const [apiKey, setApiKey] = useState('');
const [message, setMessage] = useState('');
const handleFileChange = (e: any) => {
@ -21,43 +25,51 @@ export default function Page() {
const formData = new FormData();
formData.append('file', file);
let apikey = ""
await fetch('http://localhost:7070/api/token', {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
headers: {
'Authorization': getCookie("access_token"),
}
}).then(res => res.json().then(data => {
console.log(data)
apikey = data.apiToken;
}));
}).then(res => {
res.json().then(data => {
setApiKey(data.apiToken);
})
});
console.log(apiKey);
await fetch('http://localhost:7070/api/upload', {
method: 'POST',
body: formData,
headers: {
'Authorization': apiKey,
}
}).then(async (res) => {
if (res.status === 201) {
const response = await res.json();
setMessage(`${API_URL}/api/file/` + response.id);
} else {
setMessage('Something went wrong.');
}
});
try {
await fetch('http://localhost:7070/api/upload', {
method: 'POST',
body: formData,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
headers: {
'Authorization': apikey,
}
}).then(res => res.json().then(data => console.log(data)));
} catch (error) {
console.log(error);
}
};
return (
<div style={{padding: '20px', fontFamily: 'Arial, sans-serif'}}>
<h2>Upload a File</h2>
<input type="file" onChange={handleFileChange}/>
<button onClick={handleUpload} style={{marginLeft: '10px'}}>
Upload
</button>
{message && <p>{message}</p>}
</div>
<Theme appearance="dark">
<div className="mainpage">
<div className="page">
<h2>Upload a File</h2>
</div>
<div className="page">
<input type="file" onChange={handleFileChange}/>
<Button color="crimson" variant="surface" onClick={handleUpload} style={{marginLeft: '10px'}}>
Upload
</Button>
</div>
<div className="page">{message && <p>{message}</p>}</div>
</div>
</Theme>
);
}

View file

@ -1,4 +1,5 @@
import "./main.css"
import 'dotenv/config'
import { cookies } from 'next/headers'
import "@radix-ui/themes/styles.css";
import {Text, Theme} from "@radix-ui/themes";