Apostrophe Js - 上传文件 (apostrophe-pieces-submit-widgets)

Question

我想上传文件/图像，我正在使用apostrophe-pieces-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 指的是图像字段。 请注意，我想使用自定义视图，而不是小部件本身提供的视图。 谢谢。

Answer 1

我通过重用 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] 指的是我的图像字段。