Using Dropzone.js in a file_field within a Rails form - ruby-on-rails

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

Related

Rails 6 action text required true not working

I have the following form using action text and trix in Rails 6.1:
<%= form_for :job, url: job_create_path, method: :post do |f| %>
<%= f.label :description, class: "text-muted" do %>
Job Description <span class="lighter"> * required</span>
<% end %>
<%= f.rich_text_area :description, required: true, :placeholder=>"Job Description...", :class=>"form-control", :id=>"description" %>
<% end %>
I have a backend validation that works well. However, I would like to add a frontend validation as well. 'Required true' seems not to work on 'rich_text_area'. Does anybody know how to add a frontend validation as well?
https://github.com/basecamp/trix/issues/328#issuecomment-256788015
Browsers only support the required attribute for native input elements, unfortunately.
As the Trix editor is not a native HTML element it doesn't support required: true. You might have to use some custom JS to validate it.

Why does Rails form multiple: true change submitted param form

I'm playing with ActiveStorage and trying to upload some files locally. Everything works great with the code below, but only if I remove multiple: true from the form. When it is on the form, I get an unpermitted param "files" error in the console. The unpermitted param comes from the way the form is submitting the hash.
Without multiple: true the hash lists attachments as an array (this is the working version):
"article"=>{"files"=>[#<ActionDispatch::Http::UploadedFile:0x007fb4e8e287f0
But with it turned on it it removes the array:
"article"=>{"files"=>#<ActionDispatch::Http::UploadedFile:0x007fb4eb07b7d0
What is causing this form behavior and how can I fix it?
I got the code sample from Engine Yard and here is the project code:
<h3>Attach files to this post</h3>
<%= form_with model: #article, local: true do |f| %>
<div class="form-row">
<%= f.label :file_upload, 'Attach a file' %>
<%= f.file_field :files, multiple: true %>
</div>
<%= f.submit %>
<% end %>
<h3>Attached files</h3>
<% #article.files.each do |file| %>
<%= link_to file.blob.filename, url_for(file) %>
<% end %>
When you use multiple: true you need to permit an array explicit in the article_params for :files:
For example:
params.require(:article).permit(:author, :text, files: [])
You can read more under Action Controller
Good luck!

Trouble dynamically adding fields with rails

I'm dynamically generating nested form fields using the cocoon gem as follows:
<%= simple_form_for #incorporation do |f| %>
<%= f.simple_fields_for :company do |company| %>
<%= link_to_add_association 'Add ID', company, :persons, class: "btn btn-default add-button" %>
<%= company.simple_fields_for :persons do |person|%>
<%= render 'person_fields', f: person %>
<% end =%>
<% end =%>
<% end =%>
And _person_fields is (currently) as follows:
<div>
<div class="col-md-6"><%= f.input :fname, input_html: {class: 'form-input form-control'}, label: "First Name" %></div>
</div>
The link_to_add_association should, through the cocoon gem and javascript, add another row of _person_fields to the form
The problem is that the button in fact adds nothing. Rather, it seems to just bring me to the top of the page. I know that javascript is installed (and working) via therubyracer gem. I know javascript is working because I've got bootstrap running on the site.
I know cocoon works and I've used it on a few apps. Does anyone see something that I might be leaving out?
Turns out I needed to RFTM I was missing the line:
//= require cocoon
in my application.js
I figure I'll keep this question up in case anyone else needs the reminder as well :-)

Ruby On Rails: example of file_field on form_for

I came across file uploading problem in Rails. I found file_field :file helper, that can be used with form_for(#some_model). However, I cannot find any usage for this case, as those tags are used to create/edit some model, by mass assigning. There is, AFAIK, no possibility to treat fileupload as typical field ( See File upload won't work in Ruby on Rails 3 using Multipart Form ). In such a case, manual operation on uploaded file is required. So, why would someone even want to puts a fileupload as a part of model editing?
photo.rb
class Photo < ActiveRecord::Base
attr_accessible :name, :filename,
end
photo_form.html.erb
<%= form_for(#photo, :multipart => true) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.file_field :file %>
<%= f.submit %>
<% end %>
photos_controller.rb
def create
#photo = Photo.new(params[:photo])
line above fails, because theres no :file attribute. It must be handled before and manually removed from :params. Once more - is there any real usage for such tags?
I will will you an example how I am using it I think it explains itself good enough, I hope this helps
<%= form_for #item do |f|%>
<%= f.file_field :photo, accept: 'image/png,image/jpeg'%>
<% end %>
Let me know if you have any doubts
I remember that I used this to upload a xml file in Rails
view:
<%= form_tag({action: :upload}, multipart: true) do %>
<%= file_field_tag 'xml_file' %>
<%= submit_tag 'Submit' %>
<% end %>
controller:
def upload
file_data = params[:xml_file]
end
It is using form_tag but it would not be hard to add other info into that form also.

CarrierWave and Nested Form Gem Redisplay

I have CarrierWave (0.6.1) and Nested Form gem installed. I have a Resource model with many Attachments which have a FileUploader.
I have a nested form where users can upload multiple files with one resource. I am following the section on github (https://github.com/jnicklas/carrierwave) that says how to make uploads work across redisplays unfortunately it's only for 1:1 ratio.
Here's the code that I have:
<%= nested_form_for #resource, :html=>{:multipart => true } do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p>
<%= f.fields_for :attachments, #attachment do |attachment_form| %>
<p>
<%= attachment_form.label :file %>
<%= attachment_form.file_field :file %>
<%= attachment_form.hidden_field :file_cache %>
<%= image_tag(attachment_form.file_url) if attachment_form.file? # DOESN'T WORK!!! %>
</p>
<%= attachment_form.link_to_remove "Remove this attachment" %>
<% end %>
<%= f.link_to_add "Add attachment", :attachments %>
<p><%= f.submit %></p>
<% end %>
Everything works and it populates the file_cache variable just fine for the attachment_form however I somehow need to add the following line in there to show the user the image of the document:
<%= image_tag(attachment_form.file_url) if attachment_form.file? %>
However there's a number of problems with this. First of all attachment_form is referencing the form_builder whereas I want the actual attachment. Second, attachment knows nothing about file.
Probably need to use another type of looping mechanism, but I'm new to Ruby so any help is appreciated.
Thanks all!
If you try this:
<%= image_tag(attachment_form.object.file_url) if attachment_form.object.file? %>
You will be able to show previous uploaded images. But if you want to display uploaded right now, you need to use something else. For example: https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-v4-for-Rails-3
Sorry, if I misunderstood your question.

Resources