Browse File Upload

HuXn-WebDev · HuXn-WebDev · commit 2f5233f3e3f2 · 2022-07-25T20:31:22.000-07:00
diff --git a/46. Browse File Upload/app.js b/46. Browse File Upload/app.js
@@ -0,0 +1,19 @@
+const upload = document.querySelector("input");
+const image = document.querySelector(".img img");
+const close = document.querySelector(".icon .close");
+
+upload.addEventListener("change", () => {
+  uploadFile(event);
+});
+
+function uploadFile(event) {
+  image.classList.add("active");
+  close.classList.add("exit");
+
+  image.src = URL.createObjectURL(event.target.files[0]);
+
+  close.addEventListener("click", () => {
+    image.classList.toggle("active");
+    close.classList.toggle("exit");
+  });
+}
diff --git a/46. Browse File Upload/index.html b/46. Browse File Upload/index.html
@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Browse File Upload</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="wrapper">
+      <div class="icon">
+        <p class="close">&#10006;</p>
+      </div>
+      <h2 class="text">Upload a file from your computer!</h2>
+      <div class="img">
+        <img src="" />
+      </div>
+      <input type="file" id="file" />
+      <label for="file" class="upload">Browse File</label>
+    </section>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/46. Browse File Upload/style.css b/46. Browse File Upload/style.css
@@ -0,0 +1,79 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+body {
+  min-height: 100vh;
+  background-color: crimson;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.wrapper {
+  max-width: 700px;
+  height: 500px;
+  width: 100%;
+  border: 2px dashed white;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.text {
+  margin-bottom: 25px;
+  color: #fff;
+}
+
+input {
+  display: none;
+}
+
+.upload {
+  background: white;
+  padding: 8px 20px;
+  transition: 0.4s ease;
+  cursor: pointer;
+}
+
+.upload:hover {
+  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
+}
+
+.img img {
+  width: 99%;
+  height: 99%;
+  object-fit: cover;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: none;
+}
+
+.icon p.close {
+  font-size: 20px;
+  color: #fff;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  z-index: 1;
+  display: none;
+  cursor: pointer;
+}
+
+.wrapper .icon p.close:hover {
+  color: crimson;
+}
+
+/* JavaScript */
+.img img.active {
+  display: block;
+}
+
+.wrapper .icon p.close.exit {
+  display: block;
+}
