0

Tenho um filepond onde passei duas funções com 'onaddfilestart' e 'onprocessfile' para que, quando um arquivo esteja sendo enviado e ainda não tenha completado o upload, ele trave o botão de gravar e só habilite novamente quando terminar o processamento e o arquivo estiver sido enviado corretamente. Código abaixo:

//Trava o gravar enquanto não estiver concluído o processamento

  onaddfilestart: (file) => {
    var isLoading = pond.getFiles().filter(x => x.status !== 5).length !== 0;
    if (isLoading) {
      $("#btnGravar").prop('disabled', true);
    } else {
      $("#btnGravar").prop('disabled', false);
    }

  },
  onprocessfile: (file) => {
    var isLoading = pond.getFiles().filter(x => x.status !== 5).length !== 0;
    if (isLoading) {
      $("#btnGravar").prop('disabled', true);
    } else {
      $("#btnGravar").prop('disabled', false);
    }
  },

Porém, sempre que eu recarregava a página com os arquivos salvos, ele travava o botão de gravar, não permitindo salvar alterações (Apenas se eu retirar o arquivo e fazer o upload novamente, assim ao completar o novo upload, ele destrava o botão).

Tentei resolver passando a função 'oninit' para verificar se há arquivos carregados e desabilitar o botão de gravar apenas se não houver nenhum arquivo na lista de arquivos, porém no primeiro exemplo (Estarei pondo abaixo) ele destrava ao passar pela função, mas ao sair dela, ele trava novamente (Mesmo eu colocando como última instrução no código) e na segunda, funcionou em partes. Ele às vezes vem destravado, mas na maioria das vezes, travado. A variável isLoading, que verifica se há processamento no filepond, vem ou como true ou como false, dependendo do delay do navegador (Achismo meu) para carregar o arquivo previamente salvo. Quando vai rápido, ele destrava, quando demora, ela vem como true e trava. Código abaixo

Exemplo 1:

// Código para verificar se há arquivos carregados e habilitar o botão de gravar
          oninit: () => {
                var isLoading = pond.getFiles().filter(x => x.status !== 5).length !== 0;
                if (!isLoading) {
                    $("#btnGravar").prop('disabled', false);
                }
            },

Exemplo 2:

 // Código para verificar se há arquivos carregados e habilitar o botão de gravar
      oninit: () => {
        const files = pond.getFiles();
        const isLoading = files.some(file => file.status !== FilePond.FILE_PROCESSING_COMPLETE);
        $("#btnGravar").prop('disabled', isLoading);
      },

Alguém consegue me dizer onde está meu erro? Por que a segundo exemplo às vezes funciona e às vezes não? Há algum jeito de eu setar um cooldown para ele verificar apenas quando o site tiver carregado completamente se há arquivos já salvos?

Grato desde já.

Abaixo o código filepond inteiro atualmente:

    function createFilePond() {
        const pond = FilePond.create($('#filepondVideo')[0], {


            //Trava o gravar enquanto não estiver concluído o processamento
            onaddfilestart: (file) => {
                var isLoading = pond.getFiles().filter(x => x.status !== 5).length !== 0;
                if (isLoading) {
                    $("#btnGravar").prop('disabled', true);
                } else {
                    $("#btnGravar").prop('disabled', false);
                }

            },
            onprocessfile: (file) => {
                var isLoading = pond.getFiles().filter(x => x.status !== 5).length !== 0;
                if (isLoading) {
                    $("#btnGravar").prop('disabled', true);
                } else {
                    $("#btnGravar").prop('disabled', false);
                }
            },


            // add the Image Crop default aspect ratio
            maxFiles: 1,
            imagePreviewTransparencyIndicator: "grid",
            imageValidateSizeLabelImageSizeTooSmall: "Imagem menor do que o recomendadas",
            imageValidateSizeLabelImageSizeTooBig: "Imagem maior que o  recomendadas",
            imagePreviewMarkupShow: false,
            imageResizeTargetWidth: 1080,
            imageResizeMode: 'cover',
            imageResizeUpscale: false,
            labelButtonDownloadItem: 'custom label', // by default 'Download file'
            allowDownloadByUrl: true, // by default downloading by URL disabled
            server: {
                process: {
                    url: 'js/sqlscope_testeVideo.php',
                    method: 'POST',
                    timeout: 7000,
                    onload: (formData) => {
                        verificaVideo(formData);
                        return formData;
                    },
                    onerror: null,
                    ondata: (formData) => {
                        formData.append("funcao", "processFilepond");
                        return formData;
                    },
                },
                revert: { //nao pega o ondata no sqlscope somente o url. -> https://pqina.nl/filepond/docs/api/server/#revert
                    url: 'js/sqlscope_removeArquivo.php',
                    method: 'POST',
                    timeout: 7000,
                    onload: (formData) => {
                        hideVideo();
                        return formData;
                    },
                    onerror: null,
                },
                
                load: (uniqueFileId, load) => {
                    // you would get the file data from your server here
                    fetch(uniqueFileId)
                        .then(res => res.blob())
                        .then(load);
                },
            },
            files: JSON.parse($("#jsonFilepondVideo").val()),

            // Código para verificar se há arquivos carregados e habilitar o botão de gravar
            oninit: () => {
                const files = pond.getFiles();
                const isLoading = files.some(file => file.status !== FilePond.FILE_PROCESSING_COMPLETE);
                $("#btnGravar").prop('disabled', isLoading);
            },

        });
        $('#filepondVideo').css('height', '160px');
        
    }

Grato desde já.

1 Resposta 1

0

Consegui resolver fazendo uma função para que o botão seja bloqueado apenas quando novos arquivos estiverem sendo adicionados. Fiz isso verificando se o número de arquivos presentes coincindem com o número de arquivos salvos, assim ele só bloqueia o botão para novos arquivos. Enfim, ninguém conseguiu me ajudar, mas espero que essa solução consiga ajudar outros que tiverem passando dificuldade no filepond como eu estava.

function createFilePond() {

        const files = JSON.parse($("#jsonFilepondVideo").val());

        const pond = FilePond.create($('#filepondVideo')[0], {
            onaddfilestart: (file) => {
                // Verifica se o arquivo já foi salvo no servidor
                if (file.serverId) {
                    // Arquivo já foi salvo, mantém o botão desbloqueado
                    return;
                }
                // Arquivo novo, bloqueia o botão
                $("#btnGravar").prop('disabled', true);
            },

            onprocessfile: (file) => {
                if (pond.getFiles().filter(x => x.status !== FilePond.FileStatus.PROCESSING).length === 0) {
                    $("#btnGravar").prop('disabled', false);
                }
            },

            onprocessfileprogress: (file, progress) => {
                if (progress === 1) {
                    $("#btnGravar").prop('disabled', false);
                }
            },

            // add the Image Crop default aspect ratio
            maxFiles: 1,
            imagePreviewTransparencyIndicator: "grid",
            imageValidateSizeLabelImageSizeTooSmall: "Imagem menor do que o recomendadas",
            imageValidateSizeLabelImageSizeTooBig: "Imagem maior que o  recomendadas",
            imagePreviewMarkupShow: false,
            imageResizeTargetWidth: 1080,
            imageResizeMode: 'cover',
            imageResizeUpscale: false,
            labelButtonDownloadItem: 'custom label', // by default 'Download file'
            allowDownloadByUrl: true, // by default downloading by URL disabled
            server: {
                process: {
                    url: 'js/sqlscope_testeVideo.php',
                    method: 'POST',
                    timeout: 7000,
                    onload: (formData) => {
                        verificaVideo(formData);
                        return formData;
                    },
                    onerror: null,
                    ondata: (formData) => {
                        formData.append("funcao", "processFilepond");
                        return formData;
                    },
                },
                revert: { //nao pega o ondata no sqlscope somente o url. -> https://pqina.nl/filepond/docs/api/server/#revert
                    url: 'js/sqlscope_removeArquivo.php',
                    method: 'POST',
                    timeout: 7000,
                    onload: (formData) => {
                        hideVideo();
                        return formData;
                    },
                    onerror: null,
                },
                load: (uniqueFileId, load) => {
                    fetch(uniqueFileId)
                        .then(res => res.blob())
                        .then(load);
                },
            },
            files: files
        });

        // Verifica se há arquivos novos no filepond
        const newFiles = pond.getFiles().filter(file => !file.serverId);
        if (newFiles.length > 0) {
            $("#btnGravar").prop('disabled', true);
        } else {
            $("#btnGravar").prop('disabled', false);
        }

        $('#filepondVideo').css('height', '160px');

    }


Agora verifico arquivos antigos pelo server Id, além de alguns callbacks adicionais.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .