AliceClass/collections/_dashboard/upload.php

---
layout: dashboard
lang: pt
---

<div class="envArquivo">
    <h1> Enviar Aula</h1>

		<form action="/php/upload.php" method="post" enctype="multipart/form-data">
        
        <div class="field-row">
            <!-- Nome da Aula -->
            <div class="field">
                <label class="label" for="class_name">Nome da Aula</label>
                <div class="control">
                    <input class="input" type="text" id="videoTitle" name="videoTitle" required>
                </div>
            </div>

            <!-- Nível -->
            <div class="field">
                <label class="label" for="level">Nível</label>
                <div class="control">
                    <div class="select">
                        <select id="level" name="level" required>
                            <option value="basico">Básico</option>
                            <option value="intermediario">Intermediário</option>
                            <option value="avancado">Avançado</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Descrição -->
        <div class="field">
            <label class="label" for="description">Descrição</label>
            <div class="control">
                <textarea class="textarea" id="videoDescription" name="videoDescription" rows="4" required></textarea>
            </div>
        </div>

        <!-- Software Usado -->
        <div class="field">
            <label class="label" for="software">Software Usado</label>
            <div class="control">
                <input class="input" type="text" id="software" name="software" required>
            </div>
        </div>

        <div class="field">
					<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">
                <button class="button is-primary" name="submit" type="submit">Enviar</button>
            </div>
        </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>