Hotwire-Enabled Recording Widget

Rails 7

We recently started to port all of our apps to @rails 7

Most notable change: Hotwire is enabled by default.

This is what we refactored. See widget to record videos and store them in active storage

Recording is a polymorphic model. Want to save it, but not use a nested form
👇

Hotwire

How this looks with Hotwire:

The user clicks a button, and it opens a modal (no need to be a modal, but it’s nicer to see your self bigger)

Recording yourself

Then you record yourself. This is some simple logic inside a @stimulusjs controller.

After recording, the file field is populated with the video.

This is where Hotwire comes into play.

After hitting..

Turbo-frame response

The controller yields a turbo-frame response, which replaces the HTML of the widget.

Now we can add this recording widget to any other form

• without erasing the form data for the user
• without using ugly nested forms

it’s faster and has better usability.

Got comments? Join the discussion on twitter