diff --git a/app/components/images/fields_component.html.erb b/app/components/images/fields_component.html.erb
new file mode 100644
index 000000000..991554381
--- /dev/null
+++ b/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>
diff --git a/app/components/images/fields_component.rb b/app/components/images/fields_component.rb
new file mode 100644
index 000000000..ab35baf9e
--- /dev/null
+++ b/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
diff --git a/app/helpers/imageables_helper.rb b/app/helpers/imageables_helper.rb
index 16b49caf9..b1734b4e2 100644
--- a/app/helpers/imageables_helper.rb
+++ b/app/helpers/imageables_helper.rb
@@ -11,16 +11,6 @@ module ImageablesHelper
     Setting["uploads.images.content_types"]&.split(" ") || ["image/jpeg"]
   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
-
   def imageable_humanized_accepted_content_types
     Setting.accepted_content_types_for("images").join(", ")
   end
diff --git a/app/helpers/images_helper.rb b/app/helpers/images_helper.rb
index 7777e0ec3..5f992a6b5 100644
--- a/app/helpers/images_helper.rb
+++ b/app/helpers/images_helper.rb
@@ -9,53 +9,14 @@ module ImagesHelper
     end
   end
 
-  def image_attachment_file_name(image)
-    image.attachment_file_name
-  end
-
   def image_class(image)
     image.persisted? ? "persisted-image" : "cached-image"
   end
 
-  def render_destroy_image_link(builder, 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"), builder, class: "delete remove-image"
-    end
-  end
-
-  def render_image_attachment(builder, imageable, image)
-    klass = image.persisted? || image.cached_attachment.present? ? " hide" : ""
-    builder.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(imageable),
-                         nested_image: true
-                       }
-  end
-
   def render_image(image, version, show_caption = true)
     version = image.persisted? ? version : :original
     render "images/image", image: image,
                            version: version,
                            show_caption: show_caption
   end
-
-  def image_direct_upload_path(imageable)
-    direct_uploads_path("direct_upload[resource_type]": imageable.class.name,
-                        "direct_upload[resource_id]": imageable.id,
-                        "direct_upload[resource_relation]": "image")
-  end
 end
diff --git a/app/views/images/_image_fields.html.erb b/app/views/images/_image_fields.html.erb
index 7fbfb0f01..0c3134c2a 100644
--- a/app/views/images/_image_fields.html.erb
+++ b/app/views/images/_image_fields.html.erb
@@ -1,32 +1 @@
-<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, imageable, f.object) %>
-    </div>
-    <div class="small-3 column action-remove text-right">
-      <%= render_destroy_image_link(f, 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>
+<%= render Images::FieldsComponent.new(f, imageable: imageable) %>
diff --git a/app/views/images/_nested_image.html.erb b/app/views/images/_nested_image.html.erb
index fc8e6cc62..a3adf08ba 100644
--- a/app/views/images/_nested_image.html.erb
+++ b/app/views/images/_nested_image.html.erb
@@ -5,7 +5,7 @@
 
 <div id="nested-image">
   <%= f.fields_for image_fields do |image_builder| %>
-    <%= render "images/image_fields", f: image_builder, imageable: imageable %>
+    <%= render Images::FieldsComponent.new(image_builder, imageable: imageable) %>
   <% end %>
 </div>