使用Formtastic和ActiveAdmin输入图像文件

I started to use formstatic but I need to make a file field with image preview. I mean, when i edit an object, i want to see the image already linked.

我开始使用formstatic，但是我需要创建一个带有图像预览的文件字段。我的意思是，当我编辑一个对象时，我想看到已经链接的图像。

How can I do that?

我怎么做呢?

Thank you !

谢谢你!

4 个解决方案

#1

The answer is to use the hint attribute :

答案是使用提示属性:

ActiveAdmin.register Event do
  form :html => { :enctype => "multipart/form-data" } do |f|
    f.input :map, :as => :file, :hint => f.template.image_tag(f.object.map.url(:thumb))
  end
end

Bye

再见

#2

Use paperclip with formtastic

使用回形针formtastic

Formtasitc's github page mentions that it supports paperclip:

Formtasitc的github页面提到它支持paperclip:

:file – a file field. Default for file-attachment attributes matching: paperclip or attachment_fu.

:文件-文件字段。默认文件附件属性匹配:paperclip或attachment_fu。

Here are some useful screencasts that will get you going:

以下是一些有用的尖叫可以让你继续:

Paperclip

回形针

Cropping images

裁剪图片

EDIT:

编辑:

To display an image in a column of a grid in ActiveAdmin you need to make a custom column (This is untested and could be flawed, I'm extrapolating this from the documentation):

要在ActiveAdmin的网格列中显示图像，您需要创建一个自定义列(这是未经测试的，可能有缺陷，我从文档中推断出来):

index do
    column "Title" do |post| 
        link_to image_tag("path to file", :alt => "post image"), admin_post_path(post)
    end
end

#3

Two Gems and one plugin can help your case:

两个Gems和一个插件可以帮助您:

Make sure you look at:

确保你看:

Gems:

宝石:

Paperclip: https://github.com/thoughtbot/paperclip

区别:https://github.com/thoughtbot/paperclip

RailsCast on PaperClip: http://railscasts.com/episodes/134-paperclip

RailsCast回形针:http://railscasts.com/episodes/134-paperclip

CarrierWave: https://github.com/carrierwaveuploader/carrierwave

CarrierWave:https://github.com/carrierwaveuploader/carrierwave

RailsCast on CarrierWave: http://railscasts.com/episodes/253-carrierwave-file-uploads

RailsCast CarrierWave:http://railscasts.com/episodes/253-carrierwave-file-uploads

Jquery File Upload: https://github.com/blueimp/jQuery-File-Upload

Jquery文件上传:https://github.com/blueimp/jQuery-File-Upload

Jquery File Upload RailsCast: http://railscasts.com/episodes/381-jquery-file-upload (Need a Pro Account for RailsCast)

Jquery文件上传RailsCast: http://railscasts.com/des/381 - jqueryfile - Upload(需要一个专业的RailsCast账号)

#4

As @ianpetzer said, in Rails 4.2 / ActiveAdmin master the current answer causes an object reference to be written out as well. The correct answer for 2016 should be similar to this answer:

正如@ianpetzer所说，在Rails 4.2 / ActiveAdmin master中，当前的答案也会导致一个对象引用被写入。2016年的正确答案应该类似于这个答案:

form :html => { :multipart => true } do |f|
    f.inputs do
        #...
        f.input :image, required: false, hint: image_tag(object.image.url(:medium)).html_safe
        #...
    end
end

#1