BasecampのTrix WYSIWYGエディタgemがRails 4のアプリケーションにファイルの添付ファイルを保存しない

Question

TreesエディタgemをRails 4アプリに追加し、そのページの指示に正確に従いました。私は投稿を保存するとテキストが正しく表示されます（太字/斜体/取り消し線/段落の間隔はすべて良いですが）、テキストエディタにドラッグした画像は消えます。私は間違って何をしていますか？

ありがとうございました。

アプリ/資産/スタイルシート/ application.scss：

/* 
    *= require_self 
    *= require trix 
*/ 

@import "bootstrap"; 
@import "bootstrap-sprockets"; 
@import "font-awesome"; 
@import url(https://fonts.googleapis.com/css?family=Delius+Swash+Caps); 
@import url(https://fonts.googleapis.com/css?family=Reenie+Beanie); 
@import url(https://fonts.googleapis.com/css?family=Special+Elite); 
@import url(https://fonts.googleapis.com/css?family=Londrina+Shadow); 

アプリ/資産/ JavaScriptの/ application.js：

//= require jquery 
//= require jquery_ujs 
//= require bootstrap-sprockets 
//= require bootstrap 
//= require trix 
//= require_tree . 

_form.html.erb：

<%= form_for @article, html: {multipart: true} do |f| %> 
    <p> 
    <%= f.label :image %> 
    <%= f.file_field :image %> 
    </p> 
    <p> 
    <%= f.label :title %> 
    <%= f.text_field :title %> 
    </p> 
    <p> 
    <%= f.label :subtitle %> 
    <%= f.text_field :subtitle %> 
    </p> 

    <%= f.label :text %> 
    <%= f.trix_editor :text, class: 'trix-content' %> 

    <p> 
    <%= f.label :tags %> 
    <%= f.text_field :tag_list %> 
    </p> 

    <p> 
    <%= f.submit %> 
    </p> 

<% end %> 

new.html.erb

<div class="container"> 
    <div class="jumbotron"> 
     <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
      <h1>New article</h1> 
       <%= render 'form' %> 
       <%= link_to 'Back', articles_path %> 
      </div> 
     </div> 
    </div> 
</div> 

Gemfile：

gem 'rails', '4.2.2' 
gem 'pg' 
gem 'sass-rails', '~> 5.0' 
gem 'uglifier', '>= 1.3.0' 
gem 'coffee-rails', '~> 4.1.0' 
gem 'jquery-rails' 
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6' 
gem 'devise', '~> 3.5', '>= 3.5.6' 
gem "font-awesome-rails" 
gem 'paperclip', '~> 4.2' 
gem 'aws-sdk', '~> 1.66' 
gem 'figaro', '~> 1.1', '>= 1.1.1' 
gem 'simple_form' 
gem 'mail_form' 
gem 'acts-as-taggable-on', '~> 3.4' 
gem 'fog' 
gem 'rmagick', '~> 2.15', '>= 2.15.4' 
gem 'carrierwave' 
gem "fog-aws" 
gem 'trix', '~> 0.9.0' 
gem 'jbuilder', '~> 2.0' 
gem 'sdoc', '~> 0.4.0', group: :doc 

Answer 1

この例では、私は彼らにGETとPOST方法がありImageモデルとコントローラを作成しました。私はrefileを使用してファイルのアップロードを処理しましたが、それはcarrierwaveと同様に動作します。この考えは、イベントtrix-attachment-addで聞いて、ImagesControllerにXHR POSTを送信することです。ここから、JSON応答をXHRリクエストに返信してJSON.parseに電話して、応答テキストを取得できます。有効なURLが返され、添付ファイルに属性が設定されていることがTrixによって予測されます。これが適切に行われるまで、それは保留状態にあり、実際に画像および/またはキャプションを保存しません。応答を@kobaltzするための代替案として

# 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); 

Answer 2

、あなたはこのような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 
     }); 
    }) 
    };