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á.