File Upload puzzle

benshenlan · Jul 31, 2024 · bda8088 · bda8088
1 parent 69a8588
commit bda8088
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 1 deletion.
diff --git a/app.js b/app.js
@@ -164,6 +164,12 @@ app.get('/alerts', function (req, res) {
   })
 })
 
+app.get('/upload', function (req, res) {
+  res.render('Upload', {
+    title: 'File Upload'
+  })
+})
+
 app.get('/dynamictable', function (req, res) {
 
   function genmetric(m)

diff --git a/static/icon.svg b/static/icon.svg
diff --git a/static/upload.css b/static/upload.css
diff --git a/static/upload.html b/static/upload.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/static/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UI Test Automation Playground</title>
+    <script type="module" crossorigin src="/static/upload.js"></script>
+    <link rel="stylesheet" crossorigin href="/static/upload.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/static/upload.js b/static/upload.js
diff --git a/views/Home.pug b/views/Home.pug
@@ -126,5 +126,7 @@ html(lang="en")
                             a(href="/alerts") Alerts
                         p Accept alerts, confirmations and prompts   
                     div(class="col-sm")
-                        <span>&nbsp;</span>
+                        h3
+                            a(href="/upload") File Upload
+                        p Upload files
         include footer.html
diff --git a/views/Upload.pug b/views/Upload.pug
@@ -0,0 +1,18 @@
+doctype html
+html(lang="en")
+    include head.pug
+    body
+        include navbar.pug
+
+        section
+            div(class="container")
+                h3=title
+                p Modern web applications often include file upload functionality, enabling users to easily share and manage documents, images, and other types of files directly from their devices, enhancing user interaction and content management.
+                h4 Scenario
+                ul
+                    li Attach a file via drag&drop.
+                    li Attach a file using `Browse files` button
+                h4 Playground
+                iframe(src="/static/upload.html" width="800" height="500" frameBorder="0")
+
+        include footer.html