Direct upload + Product model with multiple images

Author: coderhs

Gemfile

@@ -66,3 +66,5 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem 'active_storage_dedup', github: 'coderhs/active_storage_dedup'

Gemfile.lock

@@ -1,3 +1,10 @@
+PATH
+  remote: /Users/coderhs/sandbox/active_storage_dedup
+  specs:
+    active_storage_dedup (1.0.0.alpha)
+      activestorage (>= 6.0.0)
+      rails (>= 6.0.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -396,6 +403,7 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  active_storage_dedup!
   bootsnap
   brakeman
   bundler-audit

app/controllers/products_controller.rb

@@ -0,0 +1,70 @@
+class ProductsController < ApplicationController
+  def index
+    @products = Product.includes(images_attachments: :blob).order(created_at: :desc)
+    @product = Product.new
+  end
+
+  def create
+    product_id = params[:product_id]
+    @products = Product.includes(images_attachments: :blob).order(created_at: :desc)
+    @was_new_product = false
+
+    if product_id.present? && product_id != "" && product_id != "new"
+      # Attach to existing product
+      @product = Product.find(product_id)
+      if product_params[:images].present?
+        @new_attachments = @product.images.attach(product_params[:images])
+        if @new_attachments.present?
+          @product.reload
+          respond_to do |format|
+            format.turbo_stream
+            format.html { redirect_to products_path, notice: "Images added to product successfully." }
+          end
+        else
+          respond_to do |format|
+            format.turbo_stream do
+              render turbo_stream: turbo_stream.replace("product_form", partial: "form", locals: { product: Product.new, products: @products })
+            end
+            format.html { render :index, status: :unprocessable_entity }
+          end
+        end
+      else
+        respond_to do |format|
+          format.turbo_stream do
+            render turbo_stream: turbo_stream.replace("product_form", partial: "form", locals: { product: Product.new, products: @products })
+          end
+          format.html { redirect_to products_path, alert: "Please select at least one image." }
+        end
+      end
+    else
+      # Create new product
+      @product = Product.new(product_params.except(:images))
+      @was_new_product = true
+
+      if @product.save
+        if product_params[:images].present?
+          @product.images.attach(product_params[:images])
+        end
+        @product.reload
+        @products = Product.includes(images_attachments: :blob).order(created_at: :desc)
+        respond_to do |format|
+          format.turbo_stream
+          format.html { redirect_to products_path, notice: "Product created successfully." }
+        end
+      else
+        respond_to do |format|
+          format.turbo_stream do
+            render turbo_stream: turbo_stream.replace("product_form", partial: "form", locals: { product: @product, products: @products })
+          end
+          format.html { render :index, status: :unprocessable_entity }
+        end
+      end
+    end
+  end
+
+  private
+
+  def product_params
+    params.require(:product).permit(:name, images: [])
+  end
+end

app/controllers/uploads_controller.rb

@@ -37,6 +37,29 @@ def destroy
     end
   end
 
+  def direct_upload
+    @uploads = Upload.includes(file_attachment: :blob).order(created_at: :desc)
+  end
+
+  def create_direct_upload
+    @upload = Upload.new(upload_params)
+
+    if @upload.save
+      respond_to do |format|
+        format.json { render json: { success: true, upload: { id: @upload.id, name: @upload.name } }, status: :created }
+        format.html { redirect_to direct_upload_path, notice: "File uploaded successfully." }
+      end
+    else
+      respond_to do |format|
+        format.json { render json: { success: false, errors: @upload.errors.full_messages }, status: :unprocessable_entity }
+        format.html do
+          @uploads = Upload.includes(file_attachment: :blob).order(created_at: :desc)
+          render :direct_upload, status: :unprocessable_entity
+        end
+      end
+    end
+  end
+
   private
 
   def upload_params

app/helpers/products_helper.rb

@@ -0,0 +1,2 @@
+module ProductsHelper
+end

app/javascript/application.js

@@ -1,3 +1,8 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import * as ActiveStorage from "@rails/activestorage"
+ActiveStorage.start()
+
+// Make ActiveStorage available globally for direct upload
+window.ActiveStorage = ActiveStorage

app/models/product.rb

@@ -0,0 +1,5 @@
+class Product < ApplicationRecord
+  has_many_attached :images, deduplicate: true
+
+  validates :name, presence: true
+end

app/models/upload.rb

@@ -1,5 +1,5 @@
 class Upload < ApplicationRecord
-  has_one_attached :file
+  has_one_attached :file, deduplicate: false
 
   validates :name, presence: true
   validates :file, presence: true

app/views/products/_form.html.erb

@@ -0,0 +1,70 @@
+<div id="product_form">
+  <%= form_with model: product, url: products_path, class: "space-y-4" do |f| %>
+    <% if product.errors.any? %>
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        <ul>
+          <% product.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+
+    <div>
+      <%= f.label :product_id, "Select Existing Product (or create new)", class: "block text-gray-700 text-sm font-bold mb-2" %>
+      <%= select_tag :product_id,
+          options_from_collection_for_select(products, :id, :name, ""),
+          {
+            include_blank: "Create New Product",
+            class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
+            id: "product_select",
+            onchange: "toggleProductNameField()"
+          } %>
+    </div>
+
+    <div id="product_name_field">
+      <%= f.label :name, "Product Name", class: "block text-gray-700 text-sm font-bold mb-2" %>
+      <%= f.text_field :name,
+          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
+          id: "product_name_input" %>
+    </div>
+
+    <div>
+      <%= f.label :images, "Images", class: "block text-gray-700 text-sm font-bold mb-2" %>
+      <%= f.file_field :images,
+          multiple: true,
+          accept: "image/*",
+          class: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" %>
+      <p class="text-xs text-gray-500 mt-1">You can select multiple images</p>
+    </div>
+
+    <div>
+      <%= f.submit "Upload Images", class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer" %>
+    </div>
+  <% end %>
+</div>
+
+<script>
+function toggleProductNameField() {
+  const select = document.getElementById('product_select');
+  const nameField = document.getElementById('product_name_field');
+  const nameInput = document.getElementById('product_name_input');
+
+  if (select.value === '' || select.value === 'new') {
+    // Show name field and make it required for new products
+    nameField.style.display = 'block';
+    nameInput.required = true;
+  } else {
+    // Hide name field and make it optional when attaching to existing
+    nameField.style.display = 'none';
+    nameInput.required = false;
+    nameInput.value = '';
+  }
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', function() {
+  toggleProductNameField();
+});
+</script>
+

app/views/products/_product.html.erb

@@ -0,0 +1,21 @@
+<div class="bg-white shadow-md rounded p-6" id="<%= dom_id(product) %>">
+  <h3 class="font-semibold text-lg mb-2"><%= product.name %></h3>
+  <p class="text-sm text-gray-500 mb-4">Created: <%= product.created_at.strftime("%Y-%m-%d %H:%M") %></p>
+
+  <% if product.images.attached? %>
+    <div class="space-y-2">
+      <p class="text-sm font-medium text-gray-700">Images (<%= product.images.count %>):</p>
+      <div class="grid grid-cols-2 gap-2">
+        <% product.images.each do |image| %>
+          <div class="relative">
+            <%= image_tag image, class: "w-full h-24 object-cover rounded", alt: image.filename.to_s %>
+            <p class="text-xs text-gray-500 mt-1 truncate"><%= image.filename %></p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+    <p class="text-sm text-gray-400">No images attached</p>
+  <% end %>
+</div>
+