diff --git a/app/components/attachable/fields_component.html.erb b/app/components/attachable/fields_component.html.erb
new file mode 100644
index 000000000..ef329a31e
--- /dev/null
+++ b/app/components/attachable/fields_component.html.erb
@@ -0,0 +1,31 @@
+<div class="<%= singular_name %> 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 column title">
+    <%= f.text_field :title, placeholder: t("#{plural_name}.form.title_placeholder") %>
+  </div>
+
+  <% if attachable.attachment.exists? && attachable.attachment.styles.keys.include?(:thumb) %>
+    <%= render_image(attachable, :thumb, false) %>
+  <% end %>
+
+  <div class="small-12 column attachment-actions">
+    <p class="file-name small-9 column"><%= file_name %></p>
+
+    <div class="small-9 column action-add attachment-errors <%= singular_name %>-attachment">
+      <%= file_field %>
+    </div>
+
+    <div class="small-3 column action-remove text-right">
+      <%= destroy_link %>
+    </div>
+  </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/attachable/fields_component.rb b/app/components/attachable/fields_component.rb
new file mode 100644
index 000000000..2dc87a9f0
--- /dev/null
+++ b/app/components/attachable/fields_component.rb
@@ -0,0 +1,62 @@
+class Attachable::FieldsComponent < ApplicationComponent
+  attr_reader :f, :resource_type, :resource_id, :relation_name
+  delegate :current_user, :render_image, to: :helpers
+
+  def initialize(f, resource_type:, resource_id:, relation_name:)
+    @f = f
+    @resource_type = resource_type
+    @resource_id = resource_id
+    @relation_name = relation_name
+  end
+
+  private
+
+    def attachable
+      f.object
+    end
+
+    def singular_name
+      attachable.model_name.singular
+    end
+
+    def plural_name
+      attachable.model_name.plural
+    end
+
+    def file_name
+      attachable.attachment_file_name
+    end
+
+    def destroy_link
+      if !attachable.persisted? && attachable.cached_attachment.present?
+        link_to t("#{plural_name}.form.delete_button"), "#", class: "delete remove-cached-attachment"
+      else
+        link_to_remove_association attachable.new_record? ? t("documents.form.cancel_button") : t("#{plural_name}.form.delete_button"), f, class: "delete remove-#{singular_name}"
+      end
+    end
+
+    def file_field
+      klass = attachable.persisted? || attachable.cached_attachment.present? ? " hide" : ""
+      f.file_field :attachment,
+        label_options: { class: "button hollow #{klass}" },
+        accept: accepted_content_types_extensions,
+        class: "js-#{singular_name}-attachment",
+        data: { url: direct_upload_path }
+    end
+
+    def direct_upload_path
+      direct_uploads_path("direct_upload[resource_type]": resource_type,
+                          "direct_upload[resource_id]": resource_id,
+                          "direct_upload[resource_relation]": relation_name)
+    end
+
+    def accepted_content_types_extensions
+      Setting.accepted_content_types_for(plural_name).map do |content_type|
+        if content_type == "jpg"
+          ".jpg,.jpeg"
+        else
+          ".#{content_type}"
+        end
+      end.join(",")
+    end
+end
diff --git a/app/components/documents/fields_component.html.erb b/app/components/documents/fields_component.html.erb
index 5822f89ba..4520d7527 100644
--- a/app/components/documents/fields_component.html.erb
+++ b/app/components/documents/fields_component.html.erb
@@ -1,28 +1,6 @@
-<div class="document direct-upload document-fields nested-fields">
-  <%= f.hidden_field :id %>
-  <%= f.hidden_field :user_id, value: current_user.id %>
-  <%= f.hidden_field :cached_attachment %>
-
-  <div class="small-12 column title">
-    <%= f.text_field :title, placeholder: t("documents.form.title_placeholder") %>
-  </div>
-
-  <div class="small-12 column attachment-actions">
-    <p class="file-name small-9 column"><%= file_name %></p>
-
-    <div class="small-9 column action-add attachment-errors document-attachment">
-      <%= file_field %>
-    </div>
-
-    <div class="small-3 column action-remove text-right">
-      <%= destroy_link %>
-    </div>
-  </div>
-
-  <div class="small-12 column">
-    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
-  </div>
-
-  <hr>
-
-</div>
+<%= render Attachable::FieldsComponent.new(
+  f,
+  resource_type: document.documentable_type,
+  resource_id: document.documentable_id,
+  relation_name: "documents"
+) %>
diff --git a/app/components/documents/fields_component.rb b/app/components/documents/fields_component.rb
index 1ef9febea..01da058c0 100644
--- a/app/components/documents/fields_component.rb
+++ b/app/components/documents/fields_component.rb
@@ -1,6 +1,5 @@
 class Documents::FieldsComponent < ApplicationComponent
   attr_reader :f
-  delegate :current_user, to: :helpers
 
   def initialize(f)
     @f = f
@@ -11,35 +10,4 @@ class Documents::FieldsComponent < ApplicationComponent
     def document
       f.object
     end
-
-    def file_name
-      document.attachment_file_name
-    end
-
-    def destroy_link
-      if !document.persisted? && document.cached_attachment.present?
-        link_to t("documents.form.delete_button"), "#", class: "delete remove-cached-attachment"
-      else
-        link_to_remove_association document.new_record? ? t("documents.form.cancel_button") : t("documents.form.delete_button"), f, class: "delete remove-document"
-      end
-    end
-
-    def file_field
-      klass = document.persisted? || document.cached_attachment.present? ? " hide" : ""
-      f.file_field :attachment,
-        label_options: { class: "button hollow #{klass}" },
-        accept: accepted_content_types_extensions,
-        class: "js-document-attachment",
-        data: { url: direct_upload_path }
-    end
-
-    def direct_upload_path
-      direct_uploads_path("direct_upload[resource_type]": document.documentable_type,
-                          "direct_upload[resource_id]": document.documentable_id,
-                          "direct_upload[resource_relation]": "documents")
-    end
-
-    def accepted_content_types_extensions
-      Setting.accepted_content_types_for("documents").map { |content_type| ".#{content_type}" }.join(",")
-    end
 end
diff --git a/app/components/images/fields_component.html.erb b/app/components/images/fields_component.html.erb
index 49d8f1fd8..4a2df33af 100644
--- a/app/components/images/fields_component.html.erb
+++ b/app/components/images/fields_component.html.erb
@@ -1,29 +1,6 @@
-<div 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(image, :thumb, false) if image.attachment.exists? %>
-
-  <div class="small-12 column attachment-actions">
-    <p class="file-name small-9 column"><%= file_name %></p>
-
-    <div class="small-9 column action-add attachment-errors image-attachment">
-      <%= file_field %>
-    </div>
-
-    <div class="small-3 column action-remove text-right">
-      <%= destroy_link %>
-    </div>
-  </div>
-
-  <div class="small-12 column">
-    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
-  </div>
-
-  <hr>
-</div>
+<%= render Attachable::FieldsComponent.new(
+  f,
+  resource_type: imageable.class.name,
+  resource_id: imageable.id,
+  relation_name: "image"
+) %>
diff --git a/app/components/images/fields_component.rb b/app/components/images/fields_component.rb
index ddf60fa45..44c3ad0a1 100644
--- a/app/components/images/fields_component.rb
+++ b/app/components/images/fields_component.rb
@@ -1,52 +1,8 @@
 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
-      f.object
-    end
-
-    def file_name
-      image.attachment_file_name
-    end
-
-    def destroy_link
-      if !image.persisted? && image.cached_attachment.present?
-        link_to t("images.form.delete_button"), "#", class: "delete remove-cached-attachment"
-      else
-        link_to_remove_association t("images.form.delete_button"), f, class: "delete remove-image"
-      end
-    end
-
-    def file_field
-      klass = image.persisted? || image.cached_attachment.present? ? " hide" : ""
-      f.file_field :attachment,
-        label_options: { class: "button hollow #{klass}" },
-        accept: accepted_content_types_extensions,
-        class: "js-image-attachment",
-        data: { url: direct_upload_path }
-    end
-
-    def 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 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