Is it possible to set up a Rails form in a way that a user can upload images, and then be shown the direct link for their image before saving the rest of the form?
Use Case:
The use case is trying to be able to allow users to upload images, and then before saving the rest of the post, get links for those images and use the links in their markdown form in the same form.
I'm not familiar with Turbo, but maybe that's the way to go?
What I Have:
guide.rb
class Guide < ApplicationRecord
extend FriendlyId
friendly_id :title, use: :slugged
has_many_attached :images
acts_as_taggable_on :season, :tag
validates_presence_of :season_list, message: 'at least one season tag must be added'
validates_inclusion_of :season_list, in: %w[Spring Summer Fall Winter], message: '%<value>s is not a valid season'
end
guides_controller.rb
class GuidesController < ApplicationController
skip_before_action :verify_authenticity_token, only: %i[update_tags]
before_action :set_guide, only: %i[show edit update destroy]
rescue_from ActiveRecord::RecordNotFound, with: :guide_not_found
...
# GET /guides/new
def new
@guide = Guide.new
end
# GET /guides/1/edit
def edit; end
# POST /guides or /guides.json
def create
@guide = Guide.new(guide_params)
respond_to do |format|
if @guide.save
format.html { redirect_to guide_url(@guide), notice: 'Guide was successfully created.' }
format.json { render :show, status: :created, location: @guide }
else
format.html { render :new, status: :unprocessable_entity }
format.json { render json: @guide.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /guides/1 or /guides/1.json
def update
respond_to do |format|
if @guide.update(guide_params)
format.html { redirect_to guide_url(@guide), notice: 'Guide was successfully updated.' }
format.json { render :show, status: :ok, location: @guide }
else
format.html { render :edit, status: :unprocessable_entity }
format.json { render json: @guide.errors, status: :unprocessable_entity }
end
end
end
...
private
# Only allow a list of trusted parameters through.
def guide_params
params.require(:guide).permit(:title, :body, :tag_list, :tags, season_list: [], images: [])
end
end
_form.html.erb
<%= form_with(model: guide, class: "contents", multipart: true) do |form| %>
<% if guide.errors.any? %>
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
<h2><%= pluralize(guide.errors.count, "error") %> prohibited this guide from being saved:</h2>
<ul>
<% guide.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="my-5">
<%= form.label :title %>
<%= form.text_field :title, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= form.label :season %>
<% %w(Spring Summer Fall Winter).each do |season| %>
<%= form.check_box :season_list, { multiple: true }, season, nil %>
<%= label_tag season %>
<% end %>
</div>
<div class="my-10" data-controller="tagify">
<%= form.hidden_field :tag_list, value: @guide.tag_list.to_s, data: {"tagify-target": "hiddenField"} %>
<%= form.label :tags %>
<div >
<div data-tagify-target="input"></div>
</div>
</div>
<div class="py-10">
<%= form.label :image %>
<%= form.file_field :image, multiple: true, direct_upload: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= form.label :body %>
<%= form.text_area :body, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="inline">
<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
</div>
<% end %>
Any help or direction to research is appreciated.
