Filepond加载已保存文件后录制按钮异常锁定问题排查

问题现象 #

我在Filepond组件中配置了onaddfilestart与onprocessfile回调，实现文件上传过程中锁定录制按钮（#btnGravar），上传完成且成功后解锁的逻辑。但页面重载并加载已保存的文件时，录制按钮会被锁定，只有删除现有文件并重新上传完成后才会解锁。

尝试过的修复方案及问题 #

我尝试通过oninit回调检查已加载文件的状态来修复：

• 方案1：函数执行时按钮能解锁，但退出函数后按钮又被重新锁定
• 方案2：有时生效有时失效，推测是浏览器加载已保存文件存在延迟，导致isLoading变量值不稳定

现在需要明确问题原因，以及实现页面完全加载后再检查文件状态的可靠解决方案。

当前完整代码 #

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

        // 上传过程中锁定录制按钮
        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);
            }
        },

        // 图片裁剪相关配置
        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',
        allowDownloadByUrl: true,
        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: {
                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: JSON.parse($("#jsonFilepondVideo").val()),

        // 检查已加载文件状态，控制按钮禁用状态
        oninit: () => {
            const files = pond.getFiles();
            const isLoading = files.some(file => file.status !== FilePond.FILE_PROCESSING_COMPLETE);
            $("#btnGravar").prop('disabled', isLoading);
        },

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

问题原因分析 #

1. oninit触发时机过早：oninit在Filepond初始化完成时触发，但此时通过files配置加载的远程文件还在异步加载（server.load是异步操作），此时获取的文件状态并非最终完成状态。后续文件加载过程中会触发onaddfilestart回调，而该回调会因为文件未完成加载将按钮设置为禁用，且没有后续回调更新状态。
2. 回调覆盖不完整：原有的onaddfilestart和onprocessfile仅覆盖了新文件上传的场景，没有覆盖远程文件加载完成的场景，导致加载已保存文件后无法触发按钮解锁逻辑。
3. 硬编码状态值：使用status !== 5这种硬编码值，可读性差且容易因为版本变更失效，应该使用Filepond提供的常量FilePond.FILE_PROCESSING_COMPLETE。

解决方案 #

核心思路 #

• 封装统一的按钮状态更新函数，避免重复逻辑
• 监听Filepond全生命周期的回调，覆盖文件添加、加载、处理、移除等所有状态变化场景
• 确保异步加载的文件完成后能触发按钮状态更新

修改后的代码 #

function createFilePond() {
    const pond = FilePond.create($('#filepondVideo')[0], {
        // 封装按钮状态更新逻辑
        updateRecordButtonStatus() {
            // 使用Filepond常量替代硬编码值
            const isLoading = pond.getFiles().some(file => file.status !== FilePond.FILE_PROCESSING_COMPLETE);
            $("#btnGravar").prop('disabled', isLoading);
        },

        // 上传开始时更新状态
        onaddfilestart: () => {
            this.updateRecordButtonStatus();
        },
        // 处理文件时更新状态
        onprocessfile: () => {
            this.updateRecordButtonStatus();
        },
        // 远程文件加载完成时更新状态
        onload: () => {
            this.updateRecordButtonStatus();
        },
        // 文件添加到Pond时更新状态（包括远程加载的文件）
        onaddfile: () => {
            this.updateRecordButtonStatus();
        },
        // 文件处理完成时更新状态
        onprocesscomplete: () => {
            this.updateRecordButtonStatus();
        },
        // 文件被移除时更新状态
        onremovefile: () => {
            this.updateRecordButtonStatus();
        },

        // 原有配置保留
        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',
        allowDownloadByUrl: true,
        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: {
                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: JSON.parse($("#jsonFilepondVideo").val()),

        // 初始化后延迟检查，确保异步文件加载完成
        oninit: () => {
            setTimeout(() => {
                this.updateRecordButtonStatus();
            }, 500);
        },

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

关键改进点 #

1. 统一状态更新逻辑：将按钮状态判断封装成updateRecordButtonStatus函数，所有需要更新状态的回调都调用该函数，避免重复代码。
2. 补充全场景回调：新增onload（远程文件加载完成）、onaddfile（文件添加完成）、onprocesscomplete（处理完成）、onremovefile（文件移除）回调，覆盖所有可能导致文件状态变化的场景。
3. 替换硬编码值：使用FilePond.FILE_PROCESSING_COMPLETE替代5，提高代码兼容性和可读性。
4. 延迟初始化检查：oninit中使用setTimeout延迟执行状态检查，给异步加载文件留足时间，确保获取到最终的文件状态。

内容的提问来源于stack exchange，提问作者Guilherme Barradas