Apostrophe Js - Uploading a file (apostrophe-pieces-submit-widgets)

Question

I want to upload a file/image, I am using apostrophe-pieces-submit-widgets and apostrophe-events. I was able to bind all fields i.e title, start date , end date but unable to bind image field. When I am uploading the file it still says 'No File Chosen' and on submitting the form I get error as file is required but not selected. Here is my code :

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 refers to image field. Note that I want to use custom view, not the one provided by the widget itself. Thanks.

Daniyal Javaid Daniyal Javaid · Accepted Answer · 2018-12-17T09:18:05

I solved the problem by reusing the apostrophe-attachment macro.

{% 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 %}

and then where ever you want the upload button, use:

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

where data.schema[ 1 ] refers to my image field.

Apostrophe Js - Uploading a file (apostrophe-pieces-submit-widgets)

1 Answers