diff options
| author | ilotterytea <iltsu@alright.party> | 2025-03-19 01:44:03 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2025-03-19 01:44:03 +0500 |
| commit | f625a667c8dbff9e469a3820b14989fa45d42a4b (patch) | |
| tree | c2bb2ee68e8e956744acf4cdf4d0fd3373b633d0 | |
| parent | eacbea32efb110363e461c344100ca9511a97630 (diff) | |
feat: javascript solution for file upload
| -rw-r--r-- | public/index.php | 64 |
1 files changed, 62 insertions, 2 deletions
diff --git a/public/index.php b/public/index.php index b9880fe..739b75f 100644 --- a/public/index.php +++ b/public/index.php @@ -26,6 +26,7 @@ $accepted_mime_types = implode(', ', $accepted_mime_types); <body> <main> + <noscript>No JavaScript Mode</noscript> <?php html_big_navbar() ?> <section class="box column"> @@ -33,8 +34,14 @@ $accepted_mime_types = implode(', ', $accepted_mime_types); <p>File Upload</p> </div> <div class="content"> - <form action="/upload.php" method="post" enctype="multipart/form-data" class="column gap-8"> - <input type="file" name="file" required accept="<?= $accepted_mime_types ?>"> + <form class="column gap-8" action="/upload.php" method="post" enctype="multipart/form-data" + id="form-upload"> + <input type="file" name="file" accept="<?= $accepted_mime_types ?>" id="form-file"> + + <button type="button" id="form-upload-wrapper" style="display: none"> + <h1>Click here to start upload</h1> + </button> + <button type="submit">Upload</button> </form> </div> @@ -42,4 +49,57 @@ $accepted_mime_types = implode(', ', $accepted_mime_types); </main> </body> +<script> + const formUpload = document.getElementById('form-upload'); + formUpload.addEventListener('submit', (event) => { + event.preventDefault(); + fileUpload(); + }); + + const formUploadWrapper = document.getElementById('form-upload-wrapper'); + const formSubmitButton = document.querySelector('#form-upload button[type=submit]'); + + const formFile = document.getElementById('form-file'); + formFile.style.display = 'none'; + formFile.addEventListener("change", (e) => { + const file = e.target.files[0]; + if (file) { + formUploadWrapper.innerHTML = `<h1>File: ${file.name}</h1>`; + formSubmitButton.style.display = 'block'; + } + }); + + formUploadWrapper.addEventListener("click", () => formFile.click()); + + formSubmitButton.style.display = 'none'; + + function fileUpload() { + formUploadWrapper.innerHTML = `<h1>Uploading ${formFile.files[0].name}...</h1><p>This might take a while...</p>`; + formSubmitButton.style.display = 'none'; + + fetch(formUpload.getAttribute('action'), { + 'body': new FormData(formUpload), + 'method': 'POST', + 'headers': { + 'Accept': 'application/json' + } + }) + .catch((err) => { + console.error(err); + alert('Failed to send a file. More info in the console...'); + }) + .then((r) => r.json()) + .then((json) => { + formUploadWrapper.innerHTML = '<h1>Click here to start upload</h1>'; + + if (json.status_code != 201) { + alert(`${json.message} (${json.status_code})`); + return; + } + + alert(`File ID: ${json.data.id}`); + }); + } +</script> + </html>
\ No newline at end of file |