diff --git a/app/components/documents/fields_component.html.erb b/app/components/documents/fields_component.html.erb
new file mode 100644
index 000000000..724711eb1
--- /dev/null
+++ b/app/components/documents/fields_component.html.erb
@@ -0,0 +1,31 @@
+<div id="<%= dom_id(f.object) %>" 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">
+    <div class="small-9 column action-add attachment-errors document-attachment">
+      <%= render_attachment(f.object) %>
+    </div>
+    <div class="small-3 column action-remove text-right">
+      <%= render_destroy_document_link(f.object) %>
+    </div>
+  </div>
+
+  <div class="small-6 column">
+    <p class="file-name">
+      <%= document_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/documents/fields_component.rb b/app/components/documents/fields_component.rb
new file mode 100644
index 000000000..b5f2384eb
--- /dev/null
+++ b/app/components/documents/fields_component.rb
@@ -0,0 +1,53 @@
+class Documents::FieldsComponent < ApplicationComponent
+  attr_reader :f
+  delegate :current_user, to: :helpers
+
+  def initialize(f)
+    @f = f
+  end
+
+  private
+
+    def document_attachment_file_name(document)
+      document.attachment_file_name
+    end
+
+    def render_destroy_document_link(document)
+      if !document.persisted? && document.cached_attachment.present?
+        link_to t("documents.form.delete_button"),
+          direct_upload_destroy_path(
+            "direct_upload[resource_type]": document.documentable_type,
+            "direct_upload[resource_id]": document.documentable_id,
+            "direct_upload[resource_relation]": "documents",
+            "direct_upload[cached_attachment]": document.cached_attachment
+          ),
+          method: :delete,
+          remote: true,
+          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 render_attachment(document)
+      klass = document.persisted? || document.cached_attachment.present? ? " hide" : ""
+      f.file_field :attachment,
+        label_options: { class: "button hollow #{klass}" },
+        accept: accepted_content_types_extensions(document.documentable_type.constantize),
+        class: "js-document-attachment",
+        data: {
+          url: document_direct_upload_path(document),
+          nested_document: true
+        }
+    end
+
+    def document_direct_upload_path(document)
+      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(documentable_class)
+      Setting.accepted_content_types_for("documents").map { |content_type| ".#{content_type}" }.join(",")
+    end
+end
diff --git a/app/helpers/documentables_helper.rb b/app/helpers/documentables_helper.rb
index 74d7ccf0d..0b0a5e551 100644
--- a/app/helpers/documentables_helper.rb
+++ b/app/helpers/documentables_helper.rb
@@ -15,10 +15,6 @@ module DocumentablesHelper
     documentable_class.accepted_content_types
   end
 
-  def accepted_content_types_extensions(documentable_class)
-    Setting.accepted_content_types_for("documents").map { |content_type| ".#{content_type}" }.join(",")
-  end
-
   def documentable_humanized_accepted_content_types(documentable_class)
     Setting.accepted_content_types_for("documents").join(", ")
   end
diff --git a/app/helpers/documents_helper.rb b/app/helpers/documents_helper.rb
index 79b052a47..3ff564a03 100644
--- a/app/helpers/documents_helper.rb
+++ b/app/helpers/documents_helper.rb
@@ -1,43 +1,4 @@
 module DocumentsHelper
-  def document_attachment_file_name(document)
-    document.attachment_file_name
-  end
-
-  def render_destroy_document_link(builder, document)
-    if !document.persisted? && document.cached_attachment.present?
-      link_to t("documents.form.delete_button"),
-              direct_upload_destroy_path(
-                "direct_upload[resource_type]": document.documentable_type,
-                "direct_upload[resource_id]": document.documentable_id,
-                "direct_upload[resource_relation]": "documents",
-                "direct_upload[cached_attachment]": document.cached_attachment
-              ),
-              method: :delete,
-              remote: true,
-              class: "delete remove-cached-attachment"
-    else
-      link_to_remove_association document.new_record? ? t("documents.form.cancel_button") : t("documents.form.delete_button"), builder, class: "delete remove-document"
-    end
-  end
-
-  def render_attachment(builder, document)
-    klass = document.persisted? || document.cached_attachment.present? ? " hide" : ""
-    builder.file_field :attachment,
-                       label_options: { class: "button hollow #{klass}" },
-                       accept: accepted_content_types_extensions(document.documentable_type.constantize),
-                       class: "js-document-attachment",
-                       data: {
-                         url: document_direct_upload_path(document),
-                         nested_document: true
-                       }
-  end
-
-  def document_direct_upload_path(document)
-    direct_uploads_path("direct_upload[resource_type]": document.documentable_type,
-                        "direct_upload[resource_id]": document.documentable_id,
-                        "direct_upload[resource_relation]": "documents")
-  end
-
   def document_item_link(document)
     info_text = "#{document.humanized_content_type} | #{number_to_human_size(document.attachment_file_size)}"
 
diff --git a/app/views/documents/_document_fields.html.erb b/app/views/documents/_document_fields.html.erb
index 8f532c71b..6e452d9b2 100644
--- a/app/views/documents/_document_fields.html.erb
+++ b/app/views/documents/_document_fields.html.erb
@@ -1,31 +1 @@
-<div id="<%= dom_id(f.object) %>" 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">
-    <div class="small-9 column action-add attachment-errors document-attachment">
-      <%= render_attachment(f, f.object) %>
-    </div>
-    <div class="small-3 column action-remove text-right">
-      <%= render_destroy_document_link(f, f.object) %>
-    </div>
-  </div>
-
-  <div class="small-6 column">
-    <p class="file-name">
-      <%= document_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 Documents::FieldsComponent.new(f) %>
diff --git a/app/views/documents/_nested_documents.html.erb b/app/views/documents/_nested_documents.html.erb
index d4f80dd8e..e706b0446 100644
--- a/app/views/documents/_nested_documents.html.erb
+++ b/app/views/documents/_nested_documents.html.erb
@@ -4,7 +4,7 @@
 
   <div id="nested-documents" data-max-documents-allowed="<%= documentable.class.max_documents_allowed %>">
     <%= f.fields_for :documents do |documents_builder| %>
-      <%= render "documents/document_fields", f: documents_builder %>
+      <%= render Documents::FieldsComponent.new(documents_builder) %>
     <% end %>
   </div>