Как настроить результаты из полимерного компонента vaadin-upload? - PullRequest
Новая
       9

Как настроить результаты из полимерного компонента vaadin-upload?

0 голосов
/ 28 сентября 2018

У меня есть служба на стороне сервера, которая принимает загружаемые файлы и проверяет содержимое 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.

1 Ответ

0 голосов
/ 18 мая 2019

Я нашел ответ.Вот шаблон: 

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