如何自定义 vaadin 上传聚合物组件的结果?

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();
}