Rails - Active Storage JavaScriptイベントを使用する方法

Question

私はRubyonRailsのActive Storageを使用しています。フォームが送信されると、特定のJavaScriptイベントが実行されたようです（少なくともこれは私の理解である）。これらのイベントに耳を傾けてください。

私のフォームは、私は私の試みのどれもがとき

addEventListener("direct-upload:initialize", doSomething, false); 

function doSomething(e) { 
    alert("Event is called: " + e.type); 
} 

document.getElementById("image_form").addEventListener("direct-upload:initialize", function() { 
    console.log('direct-uploads:initialize') 
}); 

document.getElementById("image_form").addEventListener("direct-uploads:end", function() { 
    console.log('direct-uploads:start') 
}); 

を仕事ない何が起こるが、残念ながらテストするには、以下のコードを追加application.jsファイルの中

<%= form_with(model: to_do, local: true, id: 'image_form') do |form| %> 
    <div class="field"> 
    <%= form.label :title %> 
    <%= form.text_field :title, id: :to_do_title %> 
    </div> 
    <div class="field"> 
    <%= form.label :image %> 
    <%= form.file_field :image, direct_upload: true %><br> 
    </div> 

    <div class="actions"> 
    <%= form.submit id: 'submit_button' %> 
    </div> 
<% end %> 

だけ入力フィールドと画像フィールド非常に単純ですデータはデータベースに保存されますが、アラートが表示されないので、イベントリスナーはイベントを聞きませんが、フォームを送信します。

だから私の質問は、フォームが送信されるときに、これらのActive Storage javascriptのイベントをリッスンする方法

のですか？

本当にありがとうございます。

Answer 1

フォームの送信が速すぎる可能性が高いため、イベントリスナーの出力は表示されません。フォームを使用してビューにこれを追加すると

スタート：

<%= form_with(model: to_do, local: true, id: 'image_form') do |form| %> 
    ... form stuff ... 
<% end %> 

<script type="text/javascript"> 
    console.log(document.querySelector('#image_form')); // Log the form, for debugging  
    document.querySelector('#image_form').addEventListener('direct-uploads:start', function() { 
    console.log('Event was called'); 
    }); 
</script> 

また、あなたは、ログメッセージを参照してくださいねので、前にフォームを送信するWebブラウザのコンソールログを保存することもできます。