Lekcja 4

Lekcja_04/static/form4.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zadanie 4</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <h1>Upload image by fetch and display it</h1>
+    <input type="file" name="wyslany_plik" id="wyslany_plik">
+    <button id="wyslij">upload</button>
+    <div style="min-width: 100px; min-height: 50px; border: 1px solid black;" id="d1">Tu będzie obraz</div>
+
+    <script>
+        const przycisk = document.getElementById("wyslij")
+
+        przycisk.onclick = function () {
+            const fd = new FormData()
+
+            fd.append("wyslany_plik", document.getElementById("wyslany_plik").files[0])
+
+            const body = fd
+
+            fetch("/process_upload", { method: "post", body })
+                .then(response => response.json())
+                .then(function (data) {
+                    const div = document.getElementById("d1")
+                    console.log(data)
+
+                    div.innerHTML = `<img src="${'/upload/' + data.path}" alt="Obrazek">`
+                })
+                .catch(err => console.error(err))
+        }
+    </script>
+</body>
+
+</html>