Google 拾取器 API 多个拾取器发生碰撞

Question

正在开发一种工具来处理 google 驱动器，一个操作需要我们有两个文件选择器并对结果进行操作。这是一个 "move" 操作，所以第一个是 select 要移动的文件，第二个是文件应该移动到的文件夹。我有两个选择器都是这样定义的：

btn_driveMove.on('click', (e) => {
        console.log('btn_driveMove(): called.');
        let tk = getLayeredStorage(currentUserEmail, 'access_token');
        if(tk.indexOf('\') !== -1) tk = tk.replace(/\/g,'');
        if(tk.indexOf('\"') !== -1) tk = tk.replace(/"/g, '');

        gapi.client.setToken({access_token: tk});

        gapi.load('picker', () => {
        const selectFile = new google.picker.PickerBuilder()
                .addView(new google.picker.DocsView().setSelectFolderEnabled(true))
                .setOAuthToken(gapi.client.getToken().access_token)
                .setCallback(fileSelectedCallback)
                .build();
        selectFile.setVisible(true);
    });

});

function folderSelectedCallback(folderData, fileData) {
    console.log('folderSelectedCallback(): called.');
    console.log('File Data: ', fileData);
    console.log('Folder Data: ', folderData);
    const files = fileData.docs;
    const folder = folderData.docs[0];

    files.forEach(f => {
        gapi.client.drive.files.update({
            addParents: folder.id,
            fileId: f.id,
            removeParents: f.parentId
        }).then(res => {
            console.dir(res);
        });
    });
}

function fileSelectedCallback(fileData) {
    console.log('FileSelectedCallback(): File Data: ', fileData);
    const folderPicker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsView()
                            .setIncludeFolders(true)
                            .setMimeTypes('application/vnd.google-apps.folder')
                            .setSelectFolderEnabled(true))
            .setOAuthToken(gapi.client.getToken().access_token)
            .setCallback((data) => folderSelectedCallback(data, fileData))
            .build();
    folderPicker.setVisible(true);
}

问题是文件夹选取器有时会显示在文件选取器的顶部。代码仍然可以正常工作，但是看到两个选择器弹出时看起来很糟糕，关闭一个，在另一个选择一个文件，然后文件夹又回来了。这不是我想要的呈现方式....

Answer 1

.setCallback()中设置的回调不是只调用一次，而是每次Picker发生变化时都会调用。这旨在允许开发人员为 Picker 工作流程中的某些事件设置特定操作。

在这个例子中，存储在 data.action 中的 'cancelled' 或 'loaded' 操作实际上不需要做任何事情。我们真正感兴趣的是 'picked'。这意味着用户已经在 Picker 中选择了一些东西。（文件、文件夹、友好的外星人等）

我们只需要用一个简单的 if 语句包装回调处理程序的主体，如下所示：

function pickerCallback(data){
    if(data.action === 'picked'){
        ....... do some things ......
    }
}

有了这个，第一个回调应该是这样的，并确保第二个选择器不会在第一个选择器出现之前显示 used/disposed。

function fileSelectedCallback(fileData) {
    console.log('FileSelectedCallback(): File Data: ', fileData);
    if(fileData.action === 'picked'){
        const folderPicker = new google.picker.PickerBuilder()
                .addView(new google.picker.DocsView()
                                .setIncludeFolders(true)
                                .setMimeTypes('application/vnd.google-apps.folder')
                                .setSelectFolderEnabled(true))
                .setOAuthToken(gapi.client.getToken().access_token)
                .setCallback((data) => folderSelectedCallback(data, fileData))
                .build();
        folderPicker.setVisible(true);
    }
}

Google 拾取器 API 多个拾取器发生碰撞

Google Picker API multiple pickers colliding

google-api

google-picker