Гем редактора Trix WYSIWYG от Basecamp не сохраняет прикрепленный файл в приложении Rails 4

В этом примере я создал Image модель и контроллер, у которых есть методы GET и POST. Я использовал refile для обработки загрузки файлов, но с carrierwave он работал бы аналогично. Идея состоит в том, чтобы прослушать событие trix-attachment-add и отправить XHR POST на ваш ImagesController. Отсюда вы можете отправить ответ JSON обратно на свой запрос XHR и вызвать JSON.parse, чтобы захватить текст ответа. Trix ожидает, что будет возвращен действительный URL и атрибуты, установленные для вложения. Пока это не будет сделано должным образом, он будет в состоянии ожидания и фактически не будет сохранять изображение и / или подпись.

  # ImagesController
  def create
    @image = Image.new(image_params)
    @image.save

    respond_to do |format|
      format.json { render :json => { url: Refile.attachment_url(@image, :image)} }
    end
  end

# Some Javascript

(function() {
  var host, uploadAttachment;

  document.addEventListener("trix-attachment-add", function(event) {
    var attachment;
    attachment = event.attachment;
    if (attachment.file) {
      return uploadAttachment(attachment);
    }
  });

  host = "/images";

  uploadAttachment = function(attachment) {
    var file, form, xhr;
    file = attachment.file;
    form = new FormData;
    form.append("Content-Type", file.type);
    form.append("image[image]", file);
    xhr = new XMLHttpRequest;
    xhr.open("POST", host, true);
    xhr.upload.onprogress = function(event) {
      var progress;
      progress = event.loaded / event.total * 100;
      return attachment.setUploadProgress(progress);
    };
    xhr.onload = function() {
      var href, url;
        url = href = JSON.parse(this.responseText).url;
        return attachment.setAttributes({
          url: url,
          href: href
        });
    };
    return xhr.send(form);
  };


}).call(this);

В качестве альтернативы ответу @kobaltz вы можете использовать fetch следующим образом:

uploadAttachment = function(attachment) {
    var file, form, key, xhr;
    file = attachment.file;
    form = new FormData;
    form.append("Content-Type", file.type);
    form.append("image[picture]", file);
    fetch(host, {
      method: "POST",
      body: form,
      headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin'
    })
    .then(function(response) {
      if (response.ok) {
        return response.json();
      }
    })
    .then(function(json) {
      var href, url;
      url = href = json.url;
      return attachment.setAttributes({
        url: url,
        href: href
      });
    })
  };