3D-Forge-Frontend/upload.html at master · Creative-Engineering-Design-Soft/3D-Forge-Frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3차원 대장간 | Upload Model</title>
    <link rel="stylesheet" href="/style/style.css">

    <style>
        .upload-box {
            background: white;
            padding: 30px;
            border-radius: 12px;
            width: 450px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .upload-title {
            margin: 0;
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }

        .file-drop {
            border: 2px dashed #bbb;
            border-radius: 8px;
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #777;
            cursor: pointer;
            transition: 0.2s;
        }
        .file-drop:hover {
            border-color: #fd7e14;
            color: #fd7e14;
        }

        .btn-upload-submit {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background-color: #fd7e14;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-upload-submit:hover {
            background-color: #d96706;
        }

        .btn-back {
            margin-top: -10px;
            cursor: pointer;
            text-decoration: underline;
            color: #666;
            border: none;
            background: none;
        }
    </style>
</head>

<body>
    <!-- 헤더 -->
    <header class="header">
        <img src="/public/logo.png" alt="3차원 대장간" class="header-logo" />
        <a href="/login.html"><button class="login-btn">Log In</button></a>
    </header>

    <!-- 사이드바 -->
    <aside class="sidebar">
        <nav class="sidebar-nav">
            <ul>
                <li><a href="dashboard.html" style="color: inherit; text-decoration: none; display: flex;"><span class="icon">🟧</span> Dashboard</a></li>
                <li><a href="printers.html" style="color: inherit; text-decoration: none; display: flex;"><span class="icon">🖨️</span> Printers</a></li>
                <li><a href="models.html" style="color: inherit; text-decoration: none; display: flex;"><span class="icon">🧊</span> Models</a></li>
                <li><a href="history.html" style="color: inherit; text-decoration: none; display: flex;"><span class="icon">📜</span> History</a></li>
                <li><a href="settings.html" style="color: inherit; text-decoration: none; display: flex;"><span class="icon">⚙️</span> Settings</a></li>
            </ul>
        </nav>
    </aside>

    <!-- 메인 -->
    <main class="main-content">
        <div class="card">
            <h3>Upload New Model</h3>
            <div style="display: flex; justify-content: left; align-items: center;">
                <div class="upload-box">
                    <h4 class="upload-title">STL 파일 업로드</h4>

                    <!-- 드래그 앤 드롭 영역 -->
                    <label class="file-drop" for="fileInput">
                        여기에 STL 파일을 드래그하거나<br><strong>클릭하여 선택</strong>하세요
                    </label>
                    <input id="fileInput" type="file" accept=".stl" style="display:none">

                    <button class="btn-upload-submit" id="uploadBtn">업로드</button>
                    <button class="btn-back" onclick="history.back()">← 돌아가기</button>
                </div>'
            </div>
        </div>
    </main>

    <script src="/src/confirm-login.js"></script>
    <script>
        let selectedFile = null;

        document.getElementById("fileInput").addEventListener("change", (e) => {
            selectedFile = e.target.files[0];
            if (selectedFile) {
                alert("선택됨: " + selectedFile.name);
            }
        });

        document.getElementById("uploadBtn").addEventListener("click", async () => {
            if (!selectedFile) return alert("파일을 선택해주세요!");

            const formData = new FormData();
            const token = localStorage.getItem("token");
            formData.append('file', selectedFile);

            const res = await fetch(`${API_URL}/models/upload-drive`, {
                method: "POST",
                headers: {
                'Authorization': `Bearer ${token}`  // 여기 Bearer 토큰
                },
                body: formData
            });

            console.log(res);
            if (res.ok) {
                alert("업로드 완료!");
                location.href = "models.html";
            } else {
                alert("업로드 실패ㅠㅠ 서버 확인 필요");
            }
        });
    </script>
</body>
</html>