Apostrophe Js - загрузка файла (apostrophe-iece-submit-widgets)
Я хочу загрузить файл / изображение, я использую https://www.npmjs.com/package/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 ссылается на поле изображения. Обратите внимание, что я хочу использовать пользовательский вид, а не тот, который предоставляется самим виджетом. Благодарю.
1 ответ
Я решил проблему путем повторного использования макроса апостроф-вложения.
{% 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 ] относится к моему полю изображения.