用于 GWT 的 Moxieapps 文件上传器添加多个上传按钮答案

【问题标题】：Moxieapps file uploader for GWT adding multiple upload buttons用于 GWT 的 Moxieapps 文件上传器添加多个上传按钮
【发布时间】：2016-05-20 06:09:04
【问题描述】：

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

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

在检查器中查看的生成 HTML 的相关部分显示，包含“按钮”的 input 和 div 都被一遍又一遍地添加（尽管只有一个 dropzone）：

我已经检查了我的代码很多次，看看我是否在做一些可能导致这种情况的事情，但没有发现任何东西。您实际上并没有手动添加按钮或输入；这是由框架自动完成的。 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 代码的 bug？

【问题讨论】：

标签： java gwt file-upload

【解决方案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，而是将引用更改为指向我的自定义上传器类，该类现在将检查现有的FileUpload 子小部件，如果找到，则直接跳过原始onLoad() 代码这样的小部件。

可能有点像撬棍方法，但它有效（在我的情况下，更改 maven 管理的 JAR 文件不是很实用）。希望这对遇到此问题的其他人有用。

【讨论】：