Apostrophe Js - загрузка файла (apostrophe -iece-submit-widgets) - PullRequest
Новая
       9

Apostrophe Js - загрузка файла (apostrophe -iece-submit-widgets)

0 голосов
/ 17 декабря 2018

Я хочу загрузить файл / изображение, я использую apostrophe -iece-submit-widgets и apostrophe-events .Я был в состоянии связать все поля, например, заголовок, дату начала, дату окончания, но не смог связать поле изображения.Когда я загружаю файл, он по-прежнему говорит: «Файл не выбран», и при отправке формы я получаю сообщение об ошибке, поскольку файл требуется, но не выбран.Вот мой код:

app.js 

'apostrophe-events': {
    // Let's add an attachment field so the user can upload an image
    addFields: [
      {
        name: 'image',
        type: 'attachment',
        group: 'images',
        required: true
      }
    ]
  },
  'apostrophe-events-submit-widgets': {
    extend: 'apostrophe-pieces-submit-widgets',
    fields: [ 'title', 'image', 'startDate', 'endDate' ]
  }

widget.html 

{% import "apostrophe-schemas:macros.html" as schemas %}
<form class="apos-submit-pieces-form apos-ui" data-apos-pieces-submit-form>
  <h4>{{ data.label }}</h4>
  <!-- {{ schemas.fields(data.schema, { tabs: false }) }} -->
  <div class="form-group" data-name="{{data.schema[0].name}}">
    <input name="{{data.schema[0].name}}" type="text" class="form-control" id="exampleInputEmail1" placeholder="title"
      required>
  </div>
  <div class="form-group" data-name="{{data.schema[1].name}}">
    <input name="{{data.schema[1].name}}" type="file" class="form-control" id="exampleInputEmail2" required >
  </div>

  <div class="form-group" data-name="{{data.schema[2].name}}">
    <input name="{{data.schema[2].name}}" type="date" class="form-control" id="exampleInputEmail3" placeholder="startDate"
      required>
  </div>
  <div class="form-group" data-name="{{data.schema[3].name}}">
    <input name="{{data.schema[3].name}}" type="date" class="form-control" id="exampleInputEmail4" placeholder="endDate"
      required>
  </div>
  <button>Submit Now</button>
  {# Later gets hoisted out and becomes visible #}
  <div class="apos-pieces-submit-thank-you" data-apos-pieces-submit-thank-you>
    <h4>Thank you for your submission! We will review it soon.</h4>
  </div>
</form>

data.schema[1] .name ссылается на поле изображения.Обратите внимание, что я хочу использовать пользовательский вид, а не тот, который предоставляется самим виджетом.Спасибо.

1 Ответ

0 голосов
/ 17 декабря 2018

Я решил эту проблему, повторно использовав макрос apostrophe-attachment . 

{% import "apostrophe-schemas:macros.html" as schemas %}
{%- import "apostrophe-ui:components/buttons.html" as buttons -%}

{% macro attachment(field) %}
  <div class="apos-attachment-existing" style="display:none;" data-existing>
    <div class="apos-attachment-preview"><img data-preview src="" alt=""></div>
    <span class="apos-attachment-name" data-name></span>
    <div class="apos-button-group">
      <a class="apos-button apos-button--action" href="#" data-link target="_blank">{{ __("View file") }}</a>
      {% if field.crop %}
        <a class="apos-button apos-button--action" href="#" data-apos-crop-attachment>{{ __("Crop image") }}</a>
      {% endif %}
      {% if field.focalPoint %}
        <a class="apos-button apos-button--action" href="#" data-apos-focal-point-attachment>{{ __("Focal point") }}</a>
      {% endif %}
      {% if field.trash %}
        {{ buttons.danger('Delete File', { action: 'trash' }) }}
      {% endif %}
    </div>
  </div>
  <input type="file" name="{{ field.name }}" style="display:none;" data-uploader />
  {% if not field.readOnly %}{{ buttons.action('Upload File', { action: 'uploader-target' }) }}{% endif %}
{% endmacro %}

, а затем, где бы вы ни захотели нажать кнопку загрузки, используйте: 

{{ schemas.fieldset(data.schema[1], attachment) }}

где data.schema [1] относится к моему полю изображения.

...