I’m making a web system about radio collections, where one screen consists of creating the name of the main folder and inside it I can add other folders and files, similar to a drive. These elements are created from a js, but I had a lot of doubts when it came to implementing the entry in these folders, creating a card to the right of the main one, and so on, like Google Drive. In php these folders and subfolders will be saved in the database, so I had some ideas about how I could apply this, with state management or parameters in php, saving the name of the folder and passing it via GET, then showing the initially empty contents of it. Someone help me how I could do this, here are some screenshots and parts of the code. enter image description here

html

<div class="content-body">
            <h3>Conteúdos</h3>
            <div class="criacao-lado">
                <button onclick="mostrarModal()" class="btnCriarPasta">
                    <img src="/sidebar/assets/alem-disso-positivo-adicionar-simbolo-matematico.png" class="logoMais">
                    Criar Nova Pasta
                </button>
                <button onclick="mostrarModalAdicionarPasta()" class="btnAdicionarPasta" style="display: none;">
                    <img src="/sidebar/assets/alem-disso-positivo-adicionar-simbolo-matematico.png" class="logoMais">
                    Adicionar Pasta
                </button>                
                <button onclick="adicionarArquivo()" class="btnAdicionarArquivo" style="display: none;">
                    <img src="/sidebar/assets/alem-disso-positivo-adicionar-simbolo-matematico.png" class="logoMais">
                    Adicionar Arquivo
                </button>
                
            </div>
            <div class="renomearNovo">
                <div id="novoCard"></div>
            </div>
            <p id="nenhum-acervo">Nenhum acervo foi adicionado...</p>
        </div>
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        Nova Pasta
                    </div>
                    <input type="text" id="nomePasta" placeholder="Pasta sem nome" class="sem-nome" autocomplete="off">
                    <div class="modal-footer">
                        <button type="button" class="botao-cancelar" onclick="fecharModal()">Cancelar</button>
                        <button type="button" class="botao-confirmar" onclick="criarPasta()">Criar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="renameModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        Renomear Pasta
                    </div>
                    <input type="text" id="novoNomePasta" placeholder="Novo nome da pasta" class="sem-nome" autocomplete="off">
                    <div class="modal-footer">
                        <button type="button" class="botao-cancelar" onclick="fecharRenameModal()">Cancelar</button>
                        <button type="button" class="botao-confirmar" onclick="confirmarRenomear()">Mudar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="modalAdicionarPasta">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        Adicionar Pasta
                    </div>
                    <input type="text" id="nomeNovaPasta" placeholder="Nome da nova pasta" class="sem-nome" autocomplete="off">
                    <div class="modal-footer">
                        <button type="button" class="botao-cancelar" onclick="fecharModalAdicionarPasta()">Cancelar</button>
                        <button type="button" class="botao-confirmar" onclick="adicionarNovaPasta()">Adicionar</button>
                    </div>
                </div>
            </div>
        </div>

js

function mostrarModal() {
    var modal = document.getElementById("myModal");
    modal.classList.add("show-modal");
}

function fecharModal() {
    var modal = document.getElementById("myModal");
    modal.classList.remove("show-modal");
    var input = document.getElementById("nomePasta");
    input.value = "";
}

function criarPasta() {
    var modal = document.getElementById("myModal");
    modal.classList.remove("show-modal");
    var input = document.getElementById("nomePasta");
    var nomePasta = input.value.trim(); // Remova os espaços em branco extras

    if (nomePasta !== "") {
        var nenhumAcervo = document.getElementById("nenhum-acervo");
        if (nenhumAcervo) {
            nenhumAcervo.remove();
        }

        var novoCard = document.createElement("div");
        novoCard.classList.add("cardDir", "novoCard");
        novoCard.textContent = nomePasta;

        // Ajuste a largura com base no comprimento do texto
        var width = nomePasta.length * 15; // Aproximadamente 12 pixels por caractere
        novoCard.style.width = width + "px";

        document.getElementById("novoCard").appendChild(novoCard);

        var span = document.createElement("span");
        span.textContent = "Renomear";
        span.classList.add("renomear");
        span.onclick = function () {
            abrirRenameModal(nomePasta);
        };

        document.querySelector(".renomearNovo").appendChild(span);

        // Trocar o botão "Criar Nova Pasta" pelo botão "Adicionar Pasta"
        var btnCriarPasta = document.querySelector(".btnCriarPasta");
        var btnAdicionarPasta = document.querySelector(".btnAdicionarPasta");
        if (btnCriarPasta && btnAdicionarPasta) {
            btnCriarPasta.style.display = "none";
            btnAdicionarPasta.style.display = "flex";
        }

        // Mostrar o botão Adicionar Arquivo
        document.querySelector(".btnAdicionarArquivo").style.display = "flex";
    }
}

function abrirRenameModal(nomeAtual) {
    var novoNomeInput = document.getElementById("novoNomePasta");
    novoNomeInput.value = "";
    var modal = document.getElementById("renameModal");
    modal.classList.add("show-modal");
}

function fecharRenameModal() {
    var modal = document.getElementById("renameModal");
    modal.classList.remove("show-modal");
    var novoNomeInput = document.getElementById("novoNomePasta");
    novoNomeInput.value = "";
}

function confirmarRenomear() {
    var novoNomeInput = document.getElementById("novoNomePasta");
    var novoNome = novoNomeInput.value.trim();
    if (novoNome !== "") {
        var novoCard = document.querySelector(".novoCard");
        if (novoCard) {
            novoCard.textContent = novoNome;
            // Ajuste a largura com base no comprimento do novo texto
            var newWidth = novoNome.length * 15; // Aproximadamente 12 pixels por caractere
            novoCard.style.width = newWidth + "px";
        }
        fecharRenameModal();
    }
}

function mostrarModalAdicionarPasta() {
    var modal = document.getElementById("modalAdicionarPasta");
    modal.classList.add("show-modal");
}

function fecharModalAdicionarPasta() {
    var modal = document.getElementById("modalAdicionarPasta");
    modal.classList.remove("show-modal");
    var input = document.getElementById("nomeNovaPasta");
    input.value = "";
}

function adicionarNovaPasta() {
    var modal = document.getElementById("modalAdicionarPasta");
    modal.classList.remove("show-modal");
    var input = document.getElementById("nomeNovaPasta");
    var nomePasta = input.value.trim();

    if (nomePasta !== "") {
        adicionarPasta(nomePasta);
    }

    input.value = "";
}

function adicionarPasta(nomePasta) {
    var novoCard = document.createElement("div");
    novoCard.classList.add("card");

    // Conteúdo do card
    var fundoImg = document.createElement("div");
    fundoImg.classList.add("fundo-img");
    var cardImg = document.createElement("img");
    cardImg.src = "assets/logo_min.png";
    cardImg.classList.add("card-img");
    fundoImg.appendChild(cardImg);

    var cardText = document.createElement("span");
    cardText.textContent = nomePasta;
    cardText.classList.add("card-text");

    var excluirBtn = document.createElement("p"); // Alterado para <button>
    excluirBtn.textContent = "Excluir";
    excluirBtn.classList.add("excluir-card");

    // Adicione um evento de clique ao botão para lidar com a exclusão do card
    excluirBtn.addEventListener("click", function() {
        novoCard.remove(); // Remove o card ao clicar no botão "Excluir"
    });

    novoCard.appendChild(fundoImg);
    novoCard.appendChild(cardText);
    novoCard.appendChild(excluirBtn); // Adicionando o botão de excluir

    // Adicione o novo card ao conteúdo principal
    var contentBody = document.querySelector(".content-body");
    contentBody.appendChild(novoCard);
}

let arquivoContador = 0;
let cardList = []; // Array para armazenar os cards de arquivo

function adicionarArquivo() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.pdf, .jpg, .jpeg'; // Aceita vários tipos de arquivo
    input.onchange = function (event) {
        const files = event.target.files;
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            arquivoContador++;
            const novoCard = document.createElement('div');
            novoCard.classList.add('card');

            // Número do arquivo
            const numeroArquivo = document.createElement('p');
            numeroArquivo.textContent = arquivoContador;
            numeroArquivo.classList.add('numero-arquivo');

            // Nome do arquivo
            const nomeArquivo = document.createElement('span');
            nomeArquivo.textContent = file.name;
            nomeArquivo.classList.add('card-text');

            // Botão Excluir
            const excluirBtn = document.createElement('p'); // Mantido como <p>
            excluirBtn.textContent = 'Excluir';
            excluirBtn.classList.add('excluir-card');
            excluirBtn.addEventListener('click', function() {
                novoCard.remove(); // Remove o card ao clicar no botão "Excluir"
                atualizarNumerosArquivos(); // Atualiza os números dos arquivos restantes
            });

            novoCard.appendChild(numeroArquivo);
            novoCard.appendChild(nomeArquivo);
            novoCard.appendChild(excluirBtn);

            // Adicione o novo card ao conteúdo principal
            const contentBody = document.querySelector('.content-body');
            contentBody.appendChild(novoCard);
        }
    };
    input.click();
}

// Função para atualizar os números dos arquivos após a exclusão
function atualizarNumerosArquivos() {
    const numeroArquivos = document.querySelectorAll('.numero-arquivo');
    arquivoContador = 0; // Zera o contador global de arquivos
    numeroArquivos.forEach((numero, index) => {
        arquivoContador++;
        numero.textContent = arquivoContador;
    });
}

I tried to implement the entry in the folder saving data before entering definitively, but as this function was not working in js, I decided to throw it out so as not to disturb the functions that were being used. Note: the functions are in Portuguese, any questions I can translate. This screenshot shows how the card is created when you enter the folder. enter image description here