Image upload in form using input type text

Question

I'm kind of new to web designing. I'm making a project on ruby on rails.I want a form for particular listings in which i can upload images for that listings.Images is in other table.Now one way is i can use file upload but when i edit any listings,it will show file field empty.So, i'm thinking to use input type text and associate a browse button and javascript for uploading image.Besides,this i also want javacsript function for adding new image,editing image(particular) or deleting image(particular).So,as u see its kind of giving pain in brain.please explain what to do easily and step wise.Thank You

Answer 1

Thats rails casts helps for you

http://railscasts.com/episodes/134-paperclip

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

http://railscasts.com/episodes/381-jquery-file-upload (PRO Cast)

Answer 2

A text field cannot mimic an input type file the way you describe it.

You may also wanna take a look at this post about image upload with HTML, rails and paperclip How to POST files from HTML5 Drag-Drop to a Rails 3 App & Paperclip?

Answer 3

The awesome file attachment ruby gem Paperclip will do that for you.

If you are new to these I strongly suggest watching these two screencasts from Railscasts:

1) http://railscasts.com/episodes/196-nested-model-form-part-1

2) http://railscasts.com/episodes/134-paperclip

Image delete

Delete an image with Paperclip

Image Upload

The form add the actual form fields that will be used to upload the images using fields_for . Also edit the form_for call and mark the form as multipart so it can accept file uploads.

<% form_for @user, :html => {:multipart => true} do |f| %>

…

<% f.fields_for :user_images do |builder| %>

<% if builder.object.new_record? %>

<%= builder.label :caption, "Image Caption" %>
<%= builder.text_field :caption %>

<%= builder.label :photo, "Image File" %>
<%= builder.file_field :photo %>

<% end %>

<% end %>