Upload bar

_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"],

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>