Remotipart（+ Carrierwave）不上传文件，也不使用ajax [英] Remotipart ( + Carrierwave) not uploading files nor using ajax

问题描述

我已经花了一个星期的时间试图让这个工作，阅读尽可能多的关于remotipart，并试图设置正确的，但我已经惨败。我有一个标题，说明，音频文件和图像文件的形式。如果我提交没有 remote：true 的表单，它可以完美的工作，但是一旦我尝试用ajax上传表单，好像文件没有被上传。

由于我要求发布音频文件，因此我将其重定向到新的动作，并显示错误，指示音频不能为空。 >

即使我从模型中删除了这个验证，一旦我尝试上传，就没有音频文件被上传。

另外，通过检查开发人员工具，我已经意识到，我得到的响应不是JavaScript，而是HTML。

我已经尝试了其他的宝石，比如 jquery-uploadfile-rails ，但是没有一个适合我原因不同我不知道该怎么做。

_form.html.erb

 <％= form_for（post，html：{multipart：true，remote：true}，authenticity_token：true）do | f | ％GT; 
 
< div id =form-content> 
< div class =input-group field> 
< span class =input-group-addon><％= f.label'Title'％>< / span> 
 <％= f.text_field：title，class：form-control，placeholder：Title％> 
< / div> 
 
< div class =input-group field> 
< span class =input-group-addon><％= f.label：descrption％>< / span> 
 <％= f.text_field：description，class：form-control，占位符：Brief Description％> 
< / div> 
 
< div class =input-group field> 
< span class =input-group-addon><％= f.label：audio％>< / span> 
 <％= f.file_field：audio，class：filestyle，'data-iconName'=> glyphicon glyphicon-music，data-buttonText=> 浏览％> 
< / div> 
 
< div class =input-group field> 
< span class =input-group-addon><％= f.label：art％>< / span> 
 <％= f.file_field：art，class：filestyle，'data-iconName'=> glyphicon glyphicon-picture，data-buttonText=> 浏览％> 
< / div> 
 
 $ b<％= button_tag（type：'submit'，class：btn btn-block btn-primary，id：btn-post）do％> 
< span class =icon-ok icon-white>< / span>现在发布！ 
<％end％> 
 
< / div> 
<％end％> 
  

posts_controller.rb

  def创建
 @post = Post.new（post_params）
 @ post.user_id = current_user.id 
 respond_to do | format | 
 if @ post.save 
 format.html {redirect_to action：'index'} 
 format.js 
 format.json {render：show，status：：created，location： @post} 
 else 
 format.html {render：new} 
 format.js 
 format.json {render json：@ post.errors，status：：unprocessable_entity} 
 end 
 end 
 end 
  

create.js.erb

  //显示一个Javascript警报
 alert（'success！'）; 
 <％如果remotipart_submitted？ ％GT; 
 alert（'通过remotipart提交'）
<％else％> 
 alert（'通过原生jquery-ujs提交的）
 <％end％> 
  

最后，我还在学习rails，它是arquitechture和rails方式。即使我一直在努力做正确的事情，但是我很确定我正在即兴创作一些部分，试图解决错误。如果你发现任何奇怪的东西，想分享，我会完全开放，学习的好方法。如果你需要检查我的代码的其他部分只是告诉我。
Thanks！

解决方案

使用remotipart时，必须在form_for中指定action
$ b

<％= form_for（post，remote：true，format：js，html：{multipart：true}，authenticity_token：true ）do | f | ％>

让我知道这是否适合您！另外，我不确定authenticity_token是否可以在这里使用。你可能需要进入你的控制器，用before_action来禁用它。

I've spent a week right now trying to get this to work, reading as much as I can about remotipart, and trying to set it right, but I have failed miserably. I have form which has a title, description, an audio file and an image file. If I submit the form without remote: true it works perfectly, but once I try to upload the form with ajax, it seems like the files are not being uploaded.

Since I made the audio file a requirement for posting, I get redirected to the new action, displaying the error indicating that 'audio' must not be blank.

Even if I remove this validation from the model, once I try to upload, there is no audio file being uploaded.

Also, by checking the developer tools, I've realized that the response I'm getting is not javascript, but html.

I've already tried other gems, like jquery-uploadfile-rails, but none of them work for me for different reasons. I have no idea what to do right now.

_form.html.erb

<%= form_for(post, html: {multipart: true, remote: true}, authenticity_token: true) do |f| %>

<div id="form-content">
    <div class="input-group field">
        <span class="input-group-addon"><%= f.label 'Title' %></span>
        <%= f.text_field :title, class: "form-control", placeholder: "Title" %>
    </div>

    <div class="input-group field">
        <span class="input-group-addon"><%= f.label :descrption %></span>
        <%= f.text_field :description, class: "form-control", placeholder: "Brief Description" %>
    </div>

    <div class="input-group field">
        <span class="input-group-addon"><%= f.label :audio %></span>
        <%= f.file_field :audio, class: "filestyle", 'data-iconName' => "glyphicon glyphicon-music", 'data-buttonText' => "Browse" %>
    </div>

    <div class="input-group field">
        <span class="input-group-addon"><%= f.label :art %></span>
        <%= f.file_field :art, class: "filestyle", 'data-iconName' => "glyphicon glyphicon-picture", 'data-buttonText' => "Browse" %>
    </div>


    <%= button_tag(type: 'submit', class: "btn btn-block btn-primary", id: "btn-post") do %>
        <span class="icon-ok icon-white"></span> Post now!
    <% end %>

</div>
<% end %>

posts_controller.rb

def create
    @post = Post.new(post_params)
    @post.user_id = current_user.id
    respond_to do |format|
        if @post.save
            format.html { redirect_to action: 'index' }
            format.js
            format.json { render :show, status: :created, location: @post }
        else
            format.html { render :new }
            format.js
            format.json { render json: @post.errors, status: :unprocessable_entity }
        end
    end
end

create.js.erb

// Display a Javascript alert
alert('success!');
<% if remotipart_submitted? %>
    alert('submitted via remotipart')
<% else %>
    alert('submitted via native jquery-ujs')
<% end %>

Lastly, I'm still learning about rails, it's arquitechture, and the 'rails way'. Even though I've been trying to do everything correctly, I'm pretty sure I have been improvising some parts, trying to solve errors. If you find anything weird and feel like sharing, I'll be completely open to learn the good way. If you need to check any other part of my code just tell me. Thanks!

解决方案

When using remotipart you have to specify the action in your form_for, for example - this should be

<%= form_for(post, remote: true, format: "js", html: {multipart: true}, authenticity_token: true) do |f| %>

Let me know if this works for you! Also, I'm not sure if the authenticity_token will work here. You may have to go into your controller to disable this with a before_action.

这篇关于Remotipart（+ Carrierwave）不上传文件，也不使用ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！