javascript - 如何自定义 vaadin-upload 聚合物组件的结果？

Question

我有一个服务器端服务，它接收文件上传并对 zip 文件的内容进行验证。验证可能包括多个类型为成功、警告和错误的消息。

这是我正在使用的使用 vaadin-upload 的聚合物组件中的当前代码：

window.addEventListener('WebComponentsReady', function() {
    var upload = document.querySelector('vaadin-upload#responseDemo');

    upload.addEventListener('upload-response', function(event) {
        var results = JSON.parse(event.detail.xhr.response);
        console.log('upload xhr after server response: ', event.detail.xhr);

        if (results[0].messages.length > 0) {
            event.detail.file.error = "";
            for (var i = 0; i < results[0].messages.length; i++) {
                if (i > 0) {
                    event.detail.file.error += ";";
                }
                event.detail.file.error += results[0].messages[i].message;
            }
        }

        // Interpret any server response as success:
        // event.detail.xhr.status = 200;
    });
});

以下是从服务返回的结果格式：

[
    {
        "name": "foo.zip",
        "messages": [
            {
                "type": "error",
                "message": "no store.csv metadata found"
            }
        ]
    }
]

如果有任何类型错误的消息，那么它应该显示文件上传失败。如果只有警告和成功，那么上传应该有一个带有警告的图标。如果没有消息或只有成功的消息，则文件上传应标记为成功。

我目前正在使用聚合物 1，但很快将升级到聚合物 3。

Answer 1

我找到了答案。这是模板：

      <paper-dialog class="wide" id="dialog">
        <h2>Upload ZIP(s)</h2>
        <paper-dialog-scrollable>
          <vaadin-upload accept=".rdf" target="modules/upload.xq" method="POST" timeout="300000" form-data-name="my-attachment" id="responseDemo" files="{{files}}">
            <iron-icon slot="drop-label-icon" icon="description"></iron-icon>
            <span slot="drop-label">Drop your requests here (RDF files only)</span>
            <div slot="file-list">
              <h4 id="files">Files</h4>
              <template is="dom-repeat" items="[[files]]" as="file">
                <upload-item item="[[file]]"></upload-item>
              </template>
            </div>
          </vaadin-upload>
        </paper-dialog-scrollable>
        <div class="buttons">
          <paper-button on-click="_closeUpload">Close</paper-button>
        </div>
      </paper-dialog>

这是上传项自定义组件。

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-grid/vaadin-grid.js';
import '@vaadin/vaadin-progress-bar/vaadin-progress-bar.js';
import '@polymer/iron-icon/iron-icon.js';

/**
 * @customElement
 * @polymer
 */
class UploadItem extends PolymerElement {
  static get template() {
    return html`
    <style is="custom-style">
      :host {
        display: block;
        }
      .card-content {
        width: 100%;
      }
      .term {
        font-size: 14px;
      }
      vaadin-grid {
        overflow: right;
      }

      </style>
      <div class="card-content">
        <span class="term">[[item.filename]]</span>
        <span class="term">[[item.responseFilename]]</span>
        <template is="dom-if" if="[[item.status]]">
          <b>[[item.status]]</b>
          <vaadin-progress-bar indeterminate value="0"></vaadin-progress-bar>
        </template>
        <template is="dom-if" if="[[item.location]]">
          <a href="[[item.location]]" download="[[item.responseFilename]]"><iron-icon class="download" icon="icons:file-download"></iron-icon></a>
        </template>
        <vaadin-grid  theme="compact wrap-cell-content column-borders row-stripes" items="[[item.messages]]"  height-by-rows>
          <vaadin-grid-column flex-grow="1">
            <template class="header">Type</template>
            <template>[[item.type]]</template>
          </vaadin-grid-column>
          <vaadin-grid-column flex-grow="7">
            <template class="header">Message</template>
            <template>[[item.message]]</template>
          </vaadin-grid-column>
        </vaadin-grid>
      </div>
    `;
  }
  static get properties() {
    return {
      item: { type: Object, notify: true }
    };
  }


}

window.customElements.define('upload-item', UploadItem);

这是打开上传对话框的javascript。

    _openDialog() {
      var d = this.$.dialog;
      var upload = this.$.responseDemo;

      upload.addEventListener('upload-response', function(event) {
        var results = JSON.parse(event.detail.xhr.response);
        console.log('upload xhr after server response: ', event.detail.xhr);

        if (results.errorResponse) {
          event.detail.file.messages = [{'type': 'fatal', 'message': results.errorResponse.message }];
        } else {
          if (results[0].responseFilename) {
            event.detail.file.responseFilename = results[0].responseFilename;
            event.detail.file.location = results[0].location;
            if (results[0].messages.length) {
              event.detail.file.messages = results[0].messages;
            }
          }
        }
      });
      this.$.dialog.open();
    }