add_file_controller.js

import { Controller } from 'stimulus';

/**
 * Add Dynamic File Field To Form
 */
class AddFileController extends Controller {
  static targets = [ "file_inputs", "template" ]

  appendField(event) {
    event.preventDefault();
    console.log(this);
    console.log('append clicked');

    var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
    this.linksTarget.insertAdjacentHTML('beforebegin', content)

    // const hiddenField = document.createElement('input');
    // hiddenField.setAttribute('type', 'hidden');
    // hiddenField.setAttribute('value', blob.signed_id);
    // hiddenField.name = 'note[embeds][]';
    // hiddenField.dataset['action'] = "click->todolist#dropItem" ;
    // document.querySelector('form').appendChild(hiddenField);
    // this.file_inputsTarget.insertAdjacentHTML(content);
  }

  removeField() {
    console.log(this);
    console.log('remove clicked');
  }
}

export default AddFileController;


_form.html.erb

<%= f.input :attachments,
            hint: t('.attachments_help'),
            input_html: { multiple: true } %>
            hint: t('.attachments_help') -%>


<div class="d-flex flex-column">
  <%= render(partial: 'city/inspections/attachment', collection: f.object.attachments, as: :attachment) if f.object.persisted? -%>
</div>

<div data-controller="add_file">
  <template data-target="add_file.template">
    <%= f.input :attachments,
                hint: t('.attachments_help') -%>
  </template>

  <div data-target="add_file.file_inputs">
  </div>

  <button data-action="click->add_file#appendField">Add File Field</button>
</div>