gpt4 book ai didi

javascript - 如何自定义 vaadin-upload polymer 组件的结果?

转载 作者:行者123 更新时间:2023-11-30 20:09:22 25 4
gpt4 key购买 nike

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

这是我使用 vaadin-upload 的 polymer 组件中的当前代码:

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"
}
]
}
]

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

我目前使用的是 polymer 1,但很快就会升级到 polymer 3。

最佳答案

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

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

关于javascript - 如何自定义 vaadin-upload polymer 组件的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52559284/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com