This is the code in _image_fields.html.erb
<div class="nested-fields">
<div class="image-fields"> <%= image_tag f.object.image_url(:thumb) if f.object.image_url.present? %>
<%= f.file_field :image %>
<%= f.hidden_field :image_cache %> </div> <div class="add-language-spacing"> <%= link_to_remove_association 'Remove Image', f, id: 'remove_photo' %> </div>
This is where i'm rendering that partial in _profile_form.html.erb
<p id="tag">Add Some Photos!</p>
<div>
<%= f.fields_for :images do |image| %>
<%= render "image_fields", f: image %>
<% end %>
</div>
And then finally, in profile/edit.html.erb
<div class="profile-form">
<h1 class="page-title">Update Profile</h1>
<%= render 'profile_form' %>
</div>
My uploader looks like this
# Create different versions of your uploaded files:
process resize_to_fit: [300,300]
version :thumb do
process resize_to_fill: [200,200]
end
The thumb version only shows up after I press update profile and then refresh the page. For whatever reason it won't show the thumbnail version when I press choose file.
This is the confusing part of webdevelopment when you are starting out: what is executed in the client (browser) and what is executed on the server.
1) You are using cocoon to build a form, this means all data inside the form is only processed on the server once you submit the form.
2) You are using carrierwave, which explicitly only works in ruby on the server.
So together this means: only after submitting the form to the server, your uploader will create the thumbnail, and thus only after submitting the image_url will be defined.
What you want is, once you select the image, it will show a thumbnail, before uploading it to the server, and this means you either need
ajax to immediately post to the server (and let it render the thumbnail)
a javascript solution, which will read the contents of the file and show it (client-side, in the browser), before sending it to the server
Personally I do not believe cocoon is the right tool for the job here. I would suggest using something like
jquery-file-upload
dropzonejs
Related
I am trying to use Dropzone.js to upload files within my Rails app.
It seems that if I use the standard setup, the entire form becomes an image upload field. However, my form contains other fields as well. I only want to use Dropzone.js in a file_field area.
Steps I've used are:
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.erb
<%= form_for #activity, html: {class: 'ui form'} do |f| %>
<!-- Fields like this one don't need to be dropzone fields -->
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<!-- The following field does -->
<div class="field">
<%= f.label :gallery_images %>
<%= f.file_field :gallery_images, multiple: true, class: 'drop' %>
<%= f.hidden_field :gallery_images_cache %>
</div>
<% end %>
activities.coffee
$ ->
$('.drop').dropzone({ url: "/activities/post" });
As you can see, I'm trying to bind Dropzone to the 'drop' class which I've attached to the file_field. However, this doesn't seem to work correctly and I am seeing no errors in the console.
Anyone have an idea how I'd get Dropzone.js to work for a file_field within a Rails form? Or can I only bind it to the entire form?
Any help is much appreciated! Thanks!
You need to permit the :file param. Most probably there will be code something along the line of
private
def activities_params
params.permit(:name, ...other_params)
end
Add :file to the permit method
private
def activities_params
params.permit(...other_params, :file)
end
I recently noticed that on my form, if I try to upload an empty file the page will get redirected to edit instead of create. If I try to upload the file with some text in it, the form will direct to create. I couldn't find any indication that this would happen as I create my object every time (it's never persisted). Is there an explanation behind this?
The code looks something like this:
//controller
def upload
#new_cool_file = CoolFile.new
end
//form in upload.html.erb
<%= form_for #new_cool_file, html: {role: "form"} do |f| %>
<div class="form-group">
<%= f.label :file %>
<%= f.file_field :file %>
</div>
<%= f.submit "Submit"%>
<% end %>
I think you do some wrong in the rails routes.rb file , can you please see tutorial about file upload.
https://richonrails.com/articles/allowing-file-uploads-with-carrierwave
http://railscasts.com/episodes/253-carrierwave-file-uploads
I'm using CarrierWave and Nested Form Gem. Using the section titled 'Making uploads work across form redisplays' on the Carrierwave github page(https://github.com/jnicklas/carrierwave) I'm able to successfully store the cache so that even if the user makes a mistake then the file is saved. The first time I hit the page and click "Upload File" it works and shows the name of the file as well as a small thumbnail icon indicating the type of file that has been uploaded.
However the file input button is blank upon a redisplay and the icon is gone. However I know it's there because if I submit again with valid information and leave the file input button alone it creates a new resource. Here's a snippet of my code.
<%= nested_form_for #resource, :html=>{:multipart => true } do |f| %>
<p>
<%= f.label :title %><br />
<%= f.text_field :title %>
</p>
<%= f.fields_for :attachments do |attachment_form| %>
<p>
<%= attachment_form.label :file %>
<% if !attachment_form.object.file.path.blank? %>
<% file_info = get_cache_file_info attachment_form.object.file.path %>
<%= image_tag(File.join('/tmp/cache/', file_info[:folder])) #THIS DISPLAY CORRECTLY %>
<% end %>
<%= attachment_form.file_field :file %>
<%= attachment_form.hidden_field :file_cache %>
</p>
<%= attachment_form.link_to_remove "Remove this attachment" %>
<% end %>
<%= f.link_to_add "Add attachment", :attachments %>
<p><%= f.submit %></p>
<% end %>
I'm wondering if I have to edit the HTML file input to display the icon or is there some other Rails Way to take care of this. Also the image_tag display correctly, but for my application having users upload text files so the images aren't very helpful.
Thanks in advance!
Update
I also tried setting the value of the 'input' tag like so:
<%= attachment_form.file_field :file, :value => "#{File.join(file_info[:folder], '/',attachment_form.object.file.identifier)}" %>
and that didn't work either. The value of the 'input' tag is set correctly, but it still shows up as "No file selected"
The CarrierWave introduction doesn't make this very clear, but it sounds like your code is functioning 'correctly'. The cache field just serves to ensure that your attachment will be saved after a valid submission.
This document explains that the file input element's FileList should be read only, presumably for security reasons.
I'm using attribute_fu and paperclip to add multiple images to a specific record.
This is working great when creating a new record but when I want to add new images to an existing record through a common scaffold update, the images upload but replace the existing images.
Any thoughts or advice?
I'd found maybe the problem.
my model upload has article_id, description, photo_file_nane
In my partial: _upload.rhtml
if I just put:
<div class="upload">
<%= f.file_field :photo %>
<%= f.remove_link "remove" %>
</div>
when I update, it delete my photos.
but if I put:
<div class="upload">
<%= f.text_field :description %>
<%= f.file_field :photo %>
<%= f.remove_link "remove" %>
</div>
It works fine
How to upload a image file using ajax by using prototype.js plugin, I need to display those image after it is uploaded please help to solve this problem.
Thanks
You will need something on the server, too.
I recommend using paperclip for storing the files on your server.
Once you have it set up, you should make your ajax generate one form with a "file" field. Also, remember that the form must be multipart.
<% form_for #picture, :html => { :multipart => true } do |f| %>
<%= f.file_field :file %>
<%= f.submit "Submit" %>
<% end %>
If you just need to upload one file, you probably don't need full AJAX - only plain javascript - for showing/hiding the form. Like this:
<%= link_to_function 'Show/Hide image upload') do |page|
page.visual_effect :toggle_blind, 'upload_image'
end
%>
<div id='upload_image' style='display:none'>
<% form_for #picture, :html => { :multipart => true } do |f| %>
<%= f.file_field :file %>
<%= f.submit "Submit" %>
<% end %>
</div>
Notice that for hiding/showing the div I'm using a Scriptaculous effect, not just prototype - scriptaculous gets included by default on rails anyway.
you can use remote_form_for with a file upload plugin like attachment_fu or paperclip and then render the image back on the view once it is uploaded. May be using update_page in controller.
https://github.com/JangoSteve/remotipart
Remotipart is a Ruby on Rails gem enabling AJAX file uploads with jQuery in Rails 3.0 and Rails 3.1 remote forms. This gem augments the native Rails jQuery remote form functionality enabling asynchronous file uploads with little to no modification to your application.
gem 'remotipart', '~> 1.0'
bundle install