upload-image.ejs
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title><%= title %></title>
7 <link
8 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
9 rel="stylesheet"
10 integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
11 crossorigin="anonymous"
12 />
13 <script
14 src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
15 integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
16 crossorigin="anonymous"
17 ></script>
18 <script
19 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
20 integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
21 crossorigin="anonymous"
22 ></script>
23 </head>
24 <body>
25 <%- include('_partials/header') %>
26 <div class="container">
27 <div class="row">
28 <div class="col-md-6 offset-md-3">
29 <h1 class="text-center">Upload</h1>
30
31 <% if (error != null) { %>
32 <div class="alert alert-danger" role="alert"><%= error %></div>
33 <% } %>
34
35 <div class="alert alert-warning" role="alert">
36 You can only upload images in the following formats: JPEG, PNG, GIF,
37 and WebP.
38 </div>
39
40 <form
41 action="/upload-image"
42 method="post"
43 enctype="multipart/form-data"
44 >
45 <div class="mb-3">
46 <label for="caption" class="form-label">Caption</label>
47 <input
48 type="text"
49 class="form-control"
50 id="caption"
51 name="caption"
52 required
53 />
54 </div>
55 <div class="mb-3">
56 <label for="image" class="form-label">Image</label>
57 <input
58 type="file"
59 class="form-control"
60 id="image"
61 name="image"
62 required
63 accept="image/jpeg, image/png, image/gif, image/webp"
64 />
65 </div>
66 <a href="/upload/video" class="btn btn-secondary">Upload Video</a>
67 <button type="submit" class="btn btn-primary">Upload</button>
68 </form>
69 </div>
70 </div>
71 </div>
72 </body>
73</html>
74