java - 用于 GWT 的 Moxieapps 文件 uploader 添加多个上传按钮

Question

我正在构建的 GWT Web 应用程序有一个页面，用户可以在其中上传 CSV 文件。上传代码使用Moxieapps GWT Uploader ，大多数情况下效果很好。

但是，我发现了一个奇怪的情况，离开该页面然后返回该页面会再次添加上传按钮。所以我第三次访问该页面时，上传部分将如下所示:

在检查器中查看生成的 HTML 的相关部分显示，包含“按钮”的 input 和 div 都被一遍又一遍地添加(尽管有只存在一个拖放区):

我已经多次检查我的代码，看看我是否做了一些可能导致此问题的事情，但没有找到任何结果。您实际上并不手动添加按钮或输入；而是手动添加按钮或输入。这是由框架自动完成的。 fileUploader 仅初始化一次(这是 GWT 客户端代码，我已使用检查器进行调试并将语句记录到控制台以确认这一点):

fileUploader.setButtonDisabled(true).setFileTypes("*.csv")
    .setUploadURL(getBaseUrl() + "/fileUpload.upload")
    .setButtonText("<span class=\"buttonText\">Select CSV file to upload</span>")
    .setFileSizeLimit(FILE_SIZE_LIMIT)
    .setButtonCursor(CustomUploader.Cursor.HAND)
    .setButtonAction(CustomUploader.ButtonAction.SELECT_FILE)
    .setUploadProgressHandler(new UploadProgressHandler() {...})
    .setUploadSuccessHandler(...)
    // etc. with other handlers

从其他几个地方调用方法 setButtonText() ，并且文本会按预期更改，但仅在最后一个按钮上(如果有多个按钮)。否则，据我所知，我的代码中没有任何内容可以添加按钮。

还有其他人遇到过这个问题吗？我需要设置一些属性来防止这种情况吗？这可能是 moxieapps 代码中的错误吗？

Answer 1

写出我的问题并添加“这可能是 moxieapps 代码中的错误吗？”最后，我对这个怀疑进行了跟进，事实证明这确实是 org.moxieapps.gwt.uploader.client.Uploader 类中的一个错误。

input 和“选择文件”按钮添加到该类的 onLoad() 方法中，而不检查它们是否已添加。

看起来这个框架已经有一段时间没有任何积极的开发了，所以我认为是时候创建一个自定义覆盖版本了。我已经测试过了，它有效:

package yourpackagename.client.override;

import java.util.Iterator;

import org.moxieapps.gwt.uploader.client.Uploader;

import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.WidgetCollection;

/**
 * The sole reason this class exists is to fix a bug in the moxieapps uploader
 * (org.moxieapps.gwt.uploader-1.1.0.jar) where it adds a new upload input and
 * button each time its <code>onLoad()</code> method is called, i.e. every time
 * you navigate away from the page and then back to it.
 */
public class CustomUploader extends Uploader {
    @Override
    protected void onLoad() {
        boolean hasFileUploadAlready = false;
        WidgetCollection children = getChildren();
        for (Iterator<Widget> iterator = children.iterator(); iterator.hasNext();) {
            Widget eachWidget = iterator.next();
            if (eachWidget instanceof FileUpload) {
                hasFileUploadAlready = true;
            }
        }
        // Only call the super method if there isn't already a file upload input and button
        if (!hasFileUploadAlready) {
            super.onLoad();
        }
    }
}

我没有引用 org.moxieapps.gwt.uploader.client.Uploader，而是更改了引用以指向我的自定义 uploader 类，该类现在将检查现有的 FileUpload 子窗口小部件，如果找到这样的窗口小部件，则只需跳过原始 onLoad() 代码即可。

可能有点像 pry 棍方法，但它有效(就我而言，更改 maven 管理的 JAR 文件不太实用)。希望这对遇到此问题的其他人有用。