Move image fields partial to a component

app/components/images/fields_component.html.erb

@@ -0,0 +1,32 @@
+<div id="<%= dom_id(f.object) %>" class="image direct-upload nested-fields">
+  <%= f.hidden_field :id %>
+  <%= f.hidden_field :user_id, value: current_user.id %>
+  <%= f.hidden_field :cached_attachment %>
+
+  <div class="small-12 margin-top title">
+    <%= f.text_field :title, placeholder: t("images.form.title_placeholder") %>
+  </div>
+
+  <%= render_image(f.object, :thumb, false) if f.object.attachment.exists? %>
+
+  <div class="small-12 column attachment-actions">
+    <div class="small-9 column action-add attachment-errors image-attachment">
+      <%= render_image_attachment(f.object) %>
+    </div>
+    <div class="small-3 column action-remove text-right">
+      <%= render_destroy_image_link(f.object) %>
+    </div>
+  </div>
+
+  <div class="small-6 column">
+    <p class="file-name">
+      <%= image_attachment_file_name(f.object) %>
+    </p>
+  </div>
+
+  <div class="small-12 column">
+    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
+  </div>
+
+  <hr>
+</div>

app/components/images/fields_component.rb

@@ -0,0 +1,60 @@
+class Images::FieldsComponent < ApplicationComponent
+  attr_reader :f, :imageable
+  delegate :current_user, :render_image, to: :helpers
+
+  def initialize(f, imageable:)
+    @f = f
+    @imageable = imageable
+  end
+
+  private
+
+    def image_attachment_file_name(image)
+      image.attachment_file_name
+    end
+
+    def render_destroy_image_link(image)
+      if !image.persisted? && image.cached_attachment.present?
+        link_to t("images.form.delete_button"),
+          direct_upload_destroy_path(
+            "direct_upload[resource_type]": image.imageable_type,
+            "direct_upload[resource_id]": image.imageable_id,
+            "direct_upload[resource_relation]": "image",
+            "direct_upload[cached_attachment]": image.cached_attachment
+          ),
+          method: :delete,
+          remote: true,
+          class: "delete remove-cached-attachment"
+      else
+        link_to_remove_association t("images.form.delete_button"), f, class: "delete remove-image"
+      end
+    end
+
+    def render_image_attachment(image)
+      klass = image.persisted? || image.cached_attachment.present? ? " hide" : ""
+      f.file_field :attachment,
+        label_options: { class: "button hollow #{klass}" },
+        accept: imageable_accepted_content_types_extensions,
+        class: "js-image-attachment",
+        data: {
+          url: image_direct_upload_path,
+          nested_image: true
+        }
+    end
+
+    def image_direct_upload_path
+      direct_uploads_path("direct_upload[resource_type]": imageable.class.name,
+                          "direct_upload[resource_id]": imageable.id,
+                          "direct_upload[resource_relation]": "image")
+    end
+
+    def imageable_accepted_content_types_extensions
+      Setting.accepted_content_types_for("images").map do |content_type|
+        if content_type == "jpg"
+          ".jpg,.jpeg"
+        else
+          ".#{content_type}"
+        end
+      end.join(",")
+    end
+end