Загрузка файла jQuery и Rail 5
Поскольку, насколько я знаю, gem remotipart больше не поддерживается (это будет мой первый выбор из-за его простоты), я пытаюсь реализовать загрузку файлов jQuery в моем приложении Ruby on Rails 5, которое основано на учебном пособии Майкла Хартла. Поэтому я хотел бы, чтобы новый микросообщение с прикрепленным изображением отображалось в Ajax без обновления страницы. Я наблюдал за соответствующим Railscast и изменил свой код в соответствии с этими инструкциями, но мое приложение продолжает обрабатывать MicropostsController#create
как HTML.
Ниже моя форма микросообщений:
<%= form_for(@micropost, html: { multipart: true }, remote: true) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.label :content, "Micropost content", class: "prova" %>
<%= f.label :content, "Content of micropost" %>
<%= f.text_area :content, placeholder: "Compose new micropost..." %>
</div>
<%= f.submit "Post", class: "btn btn-primary" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png', class: "inputfile-micropost", onchange: "previewFile()" %>
<label for="micropost_picture"><%= image_tag("camera.png", alt: "Upload an image", class: "camera") %></label>
</span>
<img src="" class="img-preview">
<% end %>
Микросообщения отображаются с кодом html.erb ниже:
<ol class="microposts">
<%= render @feed_items %>
</ol>
где @feed_items
примерно current_user.microposts
,
Действие создания моего контроллера микросообщений:
def create
@micropost = current_user.microposts.build(micropost_params)
if @micropost.save
respond_to do |format|
format.html do
flash[:success] = "Micropost created!"
redirect_to root_url
end
format.js
end
else
@feed_items = []
flash[:danger] = @micropost.errors.full_messages.join(', ')
redirect_to root_url
end
end
app / views / microposts / create.js.erb - это:
$("ol.microposts").prepend('<%= escape_javascript(render partial: @micropost) %>');
Как предложено вышеупомянутым эпизодом Railscast, я создал photos.js.jcoffee
файл, и наполнил его следующим содержанием:
jQuery ->
$('#new_micropost').fileupload
dataType: "script"
add: (e, data) ->
types = /(\.|\/)(gif|jpe?g|png)$/i
file = data.files[0]
if types.test(file.type) || types.test(file.name)
data.context = $(tmpl("template-upload", file))
$('#new_micropost').append(data.context)
data.submit()
else
alert("#{file.name} is not a gif, jpeg, or png image file")
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')