Rails4 : How do I display and edit uploaded file using carrierwave?

Question

I can upload a file and save the file name in the database. But the file name doesn't appear when I edit.

I'd like to:

1. display the file name and the uploaded image when click "Edit" link in _article.html.erb.
2. display the uploaded image in _article.html.erb.

article.rb

class Article < ActiveRecord::Base
    .
    .
    has_many :photos, dependent: :destroy
    accepts_nested_attributes_for :photos
    .
    .
end

photo.rb

class Photo < ActiveRecord::Base
    belongs_to :article
    mount_uploader :image, ImageUploader
    validates :image, presence: true
    #validates :article_id, presence: true
end

.schema articles

CREATE TABLE "articles" ("id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, 
"content" varchar(255), 
"user_id" integer, 
"created_at" datetime, 
"updated_at" datetime,);

.schema photos

CREATE TABLE "photos" ("id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, 
"article_id" integer, 
"image" varchar(255), 
"created_at" datetime, 
"updated_at" datetime);

articles_controller.rb

class ArticlesController < ApplicationController
    .
    .
  def new
    @article = Article.new
    @article.photos.build
    .
    .
  end

  def create
    @article = current_user.articles.build(article_params)
    .
    .
  end

  def edit
    @article = Article.find(params[:id])
  end

  def update
    @article = Article.find(params[:id])
    if @article.update(article_params)
      redirect_to current_user
    else
      render 'edit'
    end
  end
    .
    .
  private

    def article_params
      params.require(:article).permit(:content, photos_attributes: [:id, :article_id, :image])
    end
    .
    .
end

articles\ _article.html.erb

I'd like to display the uploaded image and the file name here and after clicking "Edit" link (_article_form.html.erb)

<li>
    .
    .
  <span class="content"><%= article.content %></span>
  <% if current_user?(article.user) %>
    <%= link_to "Edit", edit_article_path(article.id), class: "btn btn-default" %>
  <% end %>
</li>

articles\edit.html.erb

<h1>Update article</h1>
<div class="row">
        <%= render 'shared/article_form' %>
</div>

shared\ _article_form.html.erb

When I edit, ":content" is displayed. But ":image" is "no file selected" ...

<%= form_for(@article) do |f| %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Compose new article..." %>
    <%= f.fields_for :photos do |p| %>
      <%= p.hidden_field :article_id %>
      <%= p.label :image %>
      <%= p.file_field :image %>
    <% end %>
  </div>
  <%= f.submit "Post", class: "btn btn-large btn-primary" %>
<% end %>

development.log (when I submit new article)

Started POST "/articles" for 127.0.0.1 at 2014-07-05 16:31:11 +0900
Processing by ArticlesController#create as HTML
  Parameters: {"utf8"=>"?","authenticity_token"=>"uaWcqBZ6rhS/NIal/...=", "article"=>{"category_id"=>"6", "content"=>"last", "photos_attributes"=>{"0"=>{"article_id"=>"", "image"=>#<ActionDispatch::Http::UploadedFile:0x3cb0910 @tempfile=#<File:C:/.../AppData/Local/Temp/RackMultipart20140705-6112-1q9t7r6>, @original_filename="DSCN0721_080.JPG", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"article[photos_attributes][0][image]\"; filename=\"DSCN0721_080.JPG\"\r\nContent-Type: image/jpeg\r\n">}}}, "commit"=>"Post"}
  [1m[35mUser Load (1.0ms)[0m  SELECT "users".* FROM "users" WHERE "users"."remember_token" = '...' LIMIT 1
  [1m[36m (0.0ms)[0m  [1mbegin transaction[0m
  [1m[35mSQL (3.0ms)[0m  INSERT INTO "articles" ("content", "created_at", "category_id", "updated_at", "user_id") VALUES (?, ?, ?, ?, ?)  [["content", "last"], ["created_at", Sat, 05 Jul 2014 07:31:11 UTC +00:00], ["category_id", 6], ["updated_at", Sat, 05 Jul 2014 07:31:11 UTC +00:00], ["user_id", 1]]
  [1m[36mSQL (27.0ms)[0m  [1mINSERT INTO "photos" ("article_id", "created_at", "image", "updated_at") VALUES (?, ?, ?, ?)[0m  [["article_id", 306], ["created_at", Sat, 05 Jul 2014 07:31:11 UTC +00:00], ["image", "DSCN0721_080.JPG"], ["updated_at", Sat, 05 Jul 2014 07:31:11 UTC +00:00]]
  [1m[35m (5.0ms)[0m  commit transaction
Redirected to http://localhost:3000/users/1
Completed 302 Found in 128ms (ActiveRecord: 36.0ms)

Answer 1

I had came up with the same problem earlier but didn't found any solution. What i did is here

<%= form_for(@article) do |f| %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Compose new article..." %>
    <%= f.fields_for :photos, @article.photos do |p| %>
      <%= p.hidden_field :article_id %>
      <%= p.label :image %>
      <% if p.object.image %>
        <%= image_tag p.object.image.url %>
        <p><%= p.object.image.file.filename %></p>
      <% end %>
      <%= p.file_field :image %>
    <% end %>
  </div>
  <%= f.submit "Post", class: "btn btn-large btn-primary" %>
<% end %>

Even if you try to set the image file name to file_field via js , you will get following error

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.