How can I convert this:
<input type="file" id="file" name="file">
To a Rails input, if I can say it that way and if I change it to a Ruby input do I have to change anything in my JS code? Is there any benefits on using the code this way or can I use the html way?
Try this
<%= file_field_tag 'file' %>
It will generate this HTML
<input id="file" name="file" type="file" />
More info - Rails Form Helper file_field_tag
You can use it in raw html as well, but when you are using Rails, its recommended to follow the conventions.
Related
I'm working on a React hook form project and I'm using react-dropzone to upload some images, I want to display a React hook form's ERROR when the type of file is not an image, I can console.log Error but I don't know how to use SetError and block form submition until the file format is accepted..
This is my Sandbox code
Any idea please ?
The easiest way to block form submission is to use the disabled property of the input when the length of the fileRejections array is greater than zero:
<input type="submit" disabled={fileRejections.length > 0}/>
The whole form code is:
<form onSubmit={handleSubmit(onSubmit)}>
<section className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} name="upload" />
<p>Drag 'n' drop some files here, or click to select files</p>
<em>(Only *.jpeg and *.png images will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
</aside>
</section>
<input type="submit" disabled={fileRejections.length > 0}/>
</form>
Hollow, I need to change input html tag for vue component.
In default config simple_form work like this
= f.input_field :name
<input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text">
But i need change to
= f.input_field :name
<vue-input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text"></vue-input>
Have you considered just using raw HTML in your view? You are not required to use f.input_field :name.
You could just directly write:
<vue-input class="string required" id="user_name" maxlength="255" name="user[name]" size="255" type="text"></vue-input>
You could also write your own HTML helper, see this question.
I don't think that will be possible easily as they are predefined to be used with Rails. You'll have to create new or monkey patch these methods to behave as intended.
I am attempting to pass data as params in a hidden input tag's value attribute:
<input name="quote[destination]" value= <%= "#{quote["InboundLeg"]["OriginCity"]}" %> type="hidden" />
When the form is submitted, the params contains the first word of the string being interpolated and drops everything after the first space.
If I decide to pass through an ordinary string to params through value like so:
<input name="quote[destination]" value= "foo bar buzz" type="hidden" />
the entirety of the string passes through unlike the former case. Can anyone shed some light on why this may be and some possible solutions?
Change that line to:
<input name="quote[destination]" value="<%= quote["InboundLeg"]["OriginCity"] %>" type="hidden" />
Note that the quotes are outside of the ERB statement.
Or you might want to use the hidden_field_tag form helper which creates such hidden input fields and reads nicer:
<%= hidden_field_tag 'quote[destination]', quote["InboundLeg"]["OriginCity"] %>
I would always use a helper if I have a choice because IMHO is a bad practice to mix HTML and ERB like in the first example.
Replace your input tag with
<input name="quote[destination]" value= "<%= quote['InboundLeg']['OriginCity'] %>" type="hidden" />
You have to apply quotes to the value
How does Ruby on Rails auto generate the forms input? I've come across the following code and have no idea how the HTML below is being rendered.
<%= f.input :first_name %>
Renders:
<div class="input string required"><label for="user_first_name" class="string required"><abbr title="required">*</abbr> First name</label><input type="text" value="Paul" size="30" required="required" name="user[first_name]" maxlength="255" id="user_first_name" class="string required"></div>
The HTML is generated by the Rails form helpers. Rails gives you a bunch of methods to make it easier to generate form markup so you don't have to worry about naming and typing out all of the attributes every time. Checkout that link to the docs to get more familiar.
In addition to what Chris said, the code f.input probably comes from either formtastic or simple_form. They're gems used to output a preset template using minimal code so you might want to check those.
I am working on the front-end part of a Rails 3.1 application. We are using a Twitter Bootstrap as CSS Framework, Devise as the authentication manager and the I18n gem for localization.
This is the devise syntax for a checkbox with its label
<%= f.label :remember_me %>
<%= f.check_box :remember_me %>
And this of course is the generated HTML
<label for="user_remember_me">Ricordati di me</label>
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
Since Bootstrap adds this rule for the labels display: block, the label and the checkbox are not in the same line. To have the on the same line I need an HTML output like this
<label for="user_remember_me">
Ricordati di me
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</label>
As shown in the forms markup documentation
You will have noticed that the label text is in Italian, the team member who provided localization for Devised worked hard to find out how to do so, and I do not want to force he to work on it again introducing new localized strings.
I am aware of the nice fact that the FormBuidler label method accepts a block as an argument so I could do
<% f.label :remeber_me do %>
<%= f.check_box :remember_me %>
<% end %>
But this produce an HTML output whitout the label! o.O
To be specific this is what I get:
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
I tried to look in the source code, the f.label method calls the label method, but I can only see that if there is a block no text will be printed and that the label and block will be rendered by the label_tag of the template_object.
Before diving into a source code digging, and a no sleep night, I decided to wait a moment and ask the lifesafer community of StackOverflow for help.
Am I missing something? I am calling f.label with block in the wrong way? Is some parameter missing?
Thanks!!
I don't know if you ever got this working...
Running on Rails 3.2.6 this is what I had to do:
<%= f.label :remember_me do %>
<%= f.check_box :remember_me %>
Remember Me?
<% end %>
I hope that helps you since I came here looking for an answer to the exact same problem and couldn't find it, except through trial and error.
If you want the label and checkbox on the same line, you must include .form-inline in your
<form class="form-inline">
<label for="user_remember_me">Ricordati di me</label>
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
</form>
http://jsfiddle.net/baptme/66TJY/
<%= form_tag( :class => "form-inline") %>