diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..302014b --- /dev/null +++ b/scripts.js @@ -0,0 +1,31 @@ + + document.getElementById('uploadForm').addEventListener('submit', function (event) { + event.preventDefault(); + + const fileInput = document.getElementById('file'); + const file = fileInput.files[0]; + + if (file) { + const formData = new FormData(); + formData.append('file', file); + fetch('http://127.0.0.1/invoice', { + method: 'POST', + body: formData, + }) + .then(response => response.json()) + .then(data => { + document.getElementById('responseMessage').innerHTML = ` +

Plik został pomyślnie przesłany!

+
${{JSON.stringify(data, null, 2)}}
+ `; + }) + .catch(error => { + document.getElementById('responseMessage').innerHTML = ` +

Błąd podczas przesyłania pliku: ${error.message}

+ `; + }); + } else { + alert('Proszę wybrać plik!'); + } + }); + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d23bdab --- /dev/null +++ b/styles.css @@ -0,0 +1,57 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + width: 100%; + max-width: 400px; +} + +h1 { + margin-bottom: 20px; +} + +form { + display: flex; + flex-direction: column; +} + +input[type="file"] { + margin-bottom: 10px; + padding: 8px; +} + +button { + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; + font-size: 16px; + border-radius: 4px; +} + +button:hover { + background-color: #45a049; +} + +#responseMessage { + margin-top: 20px; + font-size: 16px; +}