Personalize the image upload field in a straightforward form and use carrierwave

I've been facing challenges with customizing the simple form field for image upload (Carrierwave) in my Rails application.

Current design:

Desired outcome:

My approach involved inspecting the HTML generated by simple form helpers:

<%= f.input :photo %>
<%= f.input :photo_cache, as: :hidden %>

I then added styling, removed unnecessary fields and icons to achieve the following structure:

<label class="btn file-upload-btn">
 <div class="form-group file required event_photo upload-field">
  <div class="fileinput fileinput-new input-group" data-provides="fileinput">
   Add a photo
   <div class="form-control uneditable-input input-name" data-trigger="fileinput">
    <i class="fa fa-file fileinput-exists"></i>
    <span class="fileinput-filename"></span>
   </div>
   <div class="input-group-btn" style="display: none;">
    <input class="file required file-upload" type="file" name="event[photo]" id="event_photo">
   </div>
  </div>
 </div>
 <span style="display:none;">
  <%= f.input :photo_cache, as: :hidden %>
 </span>
</label>

The button functions correctly - I can select an image and the filename is displayed. However, when I attempt to submit the form, it returns an error stating that the image cannot be blank.

What could I be overlooking here?

cssruby-on-rails-5carrierwaveimage-uploadingsimple-form

Answer №1

If you're looking to enhance your image upload functionality, I recommend utilizing the Image Upload widget included in the Jasny gem:

You can customize the input for a user photo with the following code:

 <div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
     <input type="file" name="user[photo]" id="user_photo">
    </span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

Feel free to customize the CSS to achieve a layout similar to mine:

https://i.sstatic.net/NDmC5.png

This approach has proven successful for my project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I float a square to the right in Bootstrap with a col-md-4 size but with a height restricted to only 200 px

Looking to add a small square on the page for users to search and purchase courses directly. The square should be 4 columns wide, follow Bootstrap4 grid template, and be around 200-300 px in length. It needs to remain visible as the user scrolls down the p ...

htmlcsstwitter-bootstrapbootstrap-4

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

htmlcsstwitter-bootstrap

The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the isotope plugin). <section id="section1" class="cd-section"> // pos. static/relative has height 0px <div class="itemIso"> // pos. absolute, he ...

htmlcsspositionheightabsolute

ASP.NET showcases icons in a distinct manner compared to HTML and CSS

I'm encountering an issue while trying to convert HTML/CSS to ASP.NET. In the original HTML, the icons were arranged in a single row of four icons, and for mobile devices, they were displayed in 2x2 rows. When I attempted to copy and paste the HTML wi ...

htmlcssasp.net

Expanding Viewports with Dynamic Scrolling Bootstrap Columns

Striving to achieve a specific design in Bootstrap, but hitting roadblocks. The criteria are as follows: No scrolling in the browser window. Display occupying 100% of browser height. Columns for Menu, Left contents, and Right contents must scroll indepen ...

csstwitter-bootstrap

Guide to dynamically adding two CSS files in a single component in Angular 8

Within this component, there is a form that needs to support two languages, each with its own unique CSS style - one for left-to-right (ltr) direction, and the other for right-to-left (rtl) direction. Is there a way to conditionally apply two different CS ...

cssangulartypescriptformsangular8

Tips for adding transparent images (such as logos) to an HTML website: I'm struggling with getting rid of the white background that appears on the website. Does anyone know how

Seeking guidance as a beginner web developer. I am currently working on adding a transparent logo to my website, but the white background is showing up behind the logo. How can I fix this issue? Here is the link to the image - Here is the HTML & ...

htmlcssbackgroundtransparent

Adapting CSS according to input selection

Forgive me for asking what may seem like a simple question. I am currently using the CSS code below to modify the background color of a label when its associated checkbox is checked: #project input[id="button1"]:checked + label {background-color:red;} Is ...

css

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

Attempting to incorporate real-time search functionality into an input field

Looking to incorporate live search functionality in a text box, with the options being fetched from the server. If an item is not available, it should be added dynamically. For example, if typing "gre" and selecting that word, it should automatically be ad ...

htmlcsstwitter-bootstrapbootstrap-modal

What is the most efficient way to substitute text within an HTML document?

Is there a way to switch between languages on a website to replace text on multiple pages with a simple button click? What is the most efficient method for achieving this? This code snippet only changes text in the first div. Is there a way to implement a ...

javascripthtmlcss

Design inspired by dot matrix patterns

Is it possible to create a background HTML page filled with a dot matrix designing tool? Can anyone provide guidance on how to achieve this? If I need to use a background-image for this, where can I find the appropriate picture? Thank you to everyone in ...

css

Is it possible to update the text within a button when hovering over it in Angular?

https://i.sstatic.net/ZhNeM.png https://i.sstatic.net/kb670.png I'm looking to update the text displayed inside a button when hovering over it, similar to the examples in these images. I have already implemented the active state, but now I just need ...

htmlcssangulartypescriptfrontend

Unable to create a responsive design for this box

I've been attempting to place text and a button inside a box, but I'm encountering issues with fitting them on medium and small screens. So far, the methods I've tried have not been successful. Below is the code I am currently using: * { ...

htmlcssresponsive-designbootstrap-4

Avoid placing content before a link to ensure better focus

I came across some CSS code that closely resembles the following code. (I copied it from http://jsfiddle.net/LmvgM/8/ thanks @thirtydot). I noticed that when the link is focused, the :before content is included. Is there a way to remove it from the highli ...

css

Tips for incorporating css @keyframes within a cshtml file:

My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera) I found the ...

javascripthtmlcss

Basic node.js server that responds with HTML and CSS

I have successfully created a basic http server to send an HTML file as a response. However, I'm struggling with how to also send a CSS file so that the client can view the HTML page styled with CSS in their browser. Here is my current code: var htt ...

javascripthtmlcssnode.js

Navigating with the keys is disabled until an item is chosen

Currently working on a Shopify website for a client and encountered an issue where the keys don't scroll down upon page load unless a specific element is clicked or tab is used. I am not sure what caused this unexpected behavior, it may have occurred ...

javascriptcssvue.jsshopify

Enhanced button effect: image shaded on hover

Can someone help me figure out how to make the button and image darker when hovered over? I tried something but it didn't work... Here is a demonstration: http://jsfiddle.net/h2o8w5y6/ <!--- example code snippet --> <div class="col-lg-4 ...

htmlcsstwitter-bootstrap

`After the initial instance, the menu title will be altered.`

I have a responsive menu using Bootstrap. When the menu is collapsed, I want it to display the name of the page, and when it is open, I want it to show "Menu." Currently, I have named it "Watch the Trailer" (so let's assume that we are on that page). ...

jquerycsstwitter-bootstraptwitter-bootstrap-4