From 33b359315bce5a9218bc1e1361740accd6d5dddc Mon Sep 17 00:00:00 2001
From: emerson <junior.emerson5@gmail.com>
Date: Tue, 19 Nov 2024 00:24:22 -0300
Subject: [PATCH] Upload bar

---
 _data/aulas.json                  |  2 +-
 collections/_dashboard/upload.php | 44 +++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/_data/aulas.json b/_data/aulas.json
index 9167e0e..c4254d2 100644
--- a/_data/aulas.json
+++ b/_data/aulas.json
@@ -2,7 +2,7 @@
 	{
 		"title": "Introdução ao LMMS",
 		"user": "fls",
-		"nome": "Flávio Luiz Schiavoni",
+		"author": "Flávio Luiz Schiavoni",
 		"description": "Bem-vindo ao curso de LMMS, uma ferramenta poderosa e gratuita para produção de música digital! Aqui, você aprenderá desde os conceitos básicos até técnicas avançadas para criar suas próprias músicas e beats.",
 		"date": "9/07/2024",
 		"software": ["lmms"],
diff --git a/collections/_dashboard/upload.php b/collections/_dashboard/upload.php
index 9229237..cbbb11f 100644
--- a/collections/_dashboard/upload.php
+++ b/collections/_dashboard/upload.php
@@ -52,6 +52,11 @@ lang: pt
 					<input type="file" name="fileToUpload" id="fileToUpload">
 				</div>
 
+        <!-- Barra de Progresso -->
+        <div class="field">
+            <progress id="progressBar" max="100" value="0" style="width: 100%; display: none;"></progress>
+        </div>
+
         <!-- Botão de Enviar -->
         <div class="field">
             <div class="control">
@@ -60,3 +65,42 @@ lang: pt
         </div>
     </form>
 </div>
+
+<script>
+document.getElementById("submitButton").addEventListener("click", function () {
+    const form = document.getElementById("uploadForm");
+    const progressBar = document.getElementById("progressBar");
+    const fileInput = document.getElementById("fileToUpload");
+
+    // Mostra a barra de progresso
+    progressBar.style.display = "block";
+
+    // Cria o objeto FormData e adiciona os dados do formulário
+    const formData = new FormData(form);
+
+    // Configura o XMLHttpRequest
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", "/php/upload.php", true);
+
+    // Atualiza a barra de progresso com base no progresso do upload
+    xhr.upload.onprogress = function (event) {
+        if (event.lengthComputable) {
+            const percentComplete = (event.loaded / event.total) * 100;
+            progressBar.value = percentComplete;
+        }
+    };
+
+    // Finaliza a barra de progresso ao término do upload
+    xhr.onload = function () {
+        if (xhr.status === 200) {
+            alert("Upload concluído com sucesso!");
+        } else {
+            alert("Erro ao enviar o arquivo!");
+        }
+        progressBar.style.display = "none"; // Oculta a barra após o envio
+    };
+
+    // Envia os dados
+    xhr.send(formData);
+});
+</script>
\ No newline at end of file