Lekcja 4

Lekcja_04/static/css/style.css

@@ -0,0 +1,15 @@
+* {
+    box-sizing: border-box;
+    font-family: monospace;
+}
+
+h1 {
+    text-align: center;
+}
+
+div {
+    margin: 1em;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+}

Lekcja_04/static/form1.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zadanie 1</title>
+</head>
+
+<body>
+    <form action="/process_upload" method="post" enctype="multipart/form-data">
+        <input type="text" name="nazwa" id="nazwa">
+        <input type="date" name="date" id="date"><br>
+        <input type="file" name="wyslany_plik" id="wyslany_plik" accept="image/*" required><br>
+        <input type="submit" value="Wyślij">
+    </form>
+</body>
+
+</html>

Lekcja_04/static/form2.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zadanie 1</title>
+</head>
+
+<body>
+    <form action="/process_upload" method="post" enctype="multipart/form-data">
+        <input type="text" name="nazwa" id="nazwa">
+        <input type="date" name="date" id="date"><br>
+        <input type="file" multiple name="wyslany_plik" id="wyslany_plik" accept="image/*" required><br>
+        <input type="submit" value="Wyślij">
+    </form>
+</body>
+
+</html>

Lekcja_04/static/form3.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zadanie 3</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <h1>Upload file by fetch, no form</h1>
+    <input type="file" name="wyslany_plik" id="wyslany_plik">
+    <button id="wyslij">upload</button>
+    <pre id="wiadomosc">Tu beda dane z powrotem</pre>
+
+    <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 pre = document.getElementById("wiadomosc")
+
+                    pre.innerHTML = JSON.stringify(data, null, 5)
+                })
+                .catch(err => console.error(err))
+        }
+    </script>
+</body>
+
+</html>

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>

Lekcja_04/static/form5.html

@@ -0,0 +1,47 @@
+<!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 or txt file</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>
+    <div style="min-width: 100px; min-height: 50px; border: 1px solid black;" id="d2">Tu będzie tekst</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) {
+                    console.log(data)
+
+                    if (data.type.substring(0, 6) == 'image/') {
+                        const div = document.getElementById("d1")
+                        div.innerHTML = `<img src="${'/upload/' + data.path}" alt="Obrazek">`
+                    } else if (data.type == 'text/plain') {
+                        const div = document.getElementById("d2")
+                        div.innerText = data.text
+                    }
+
+                })
+                .catch(err => console.error(err))
+        }
+    </script>
+</body>
+
+</html>