diff --git a/app/views/documents/_form.html.erb b/app/views/documents/_form.html.erb
index 88a1c87456..7897a6957b 100644
--- a/app/views/documents/_form.html.erb
+++ b/app/views/documents/_form.html.erb
@@ -31,6 +31,10 @@ See doc/COPYRIGHT.rdoc for more details.
 ++#%>
 
 <%= error_messages_for 'document' %>
+<% resource = ::API::V3::Documents::DocumentRepresenter.new(f.object,
+                                                            current_user: current_user,
+                                                            embed_links: true) %>
+
 <div class="form--field">
   <%= f.select :category_id,
                DocumentCategory.all.map { |c| [c.name, c.id] },
@@ -44,7 +48,7 @@ See doc/COPYRIGHT.rdoc for more details.
   <%= f.text_area :description,
                   container_class: '-xxwide',
                   with_text_formatting: true,
-                  resource: { _type: 'Document' },
+                  resource: resource,
                   preview_context: preview_context(f.object.project) %>
 </div>
-<%= render :partial => 'attachments/form' %>
+<attachments data-resource="<%= resource.to_json %>" data-allow-uploading="true"></attachments>
diff --git a/app/views/documents/show.html.erb b/app/views/documents/show.html.erb
index 2d6a22cfcc..9a61be73f3 100644
--- a/app/views/documents/show.html.erb
+++ b/app/views/documents/show.html.erb
@@ -53,25 +53,8 @@ See doc/COPYRIGHT.rdoc for more details.
 <%= format_text @document.description, attachments: @document.attachments %>
 </div>
 
-<h3><%= l(:label_attachment_plural) %></h3>
-<%= link_to_attachments @document %>
-
-<% if authorize_for('documents', 'add_attachment') %>
-  <p>
-    <%= link_to_function l(:label_attachment_new),
-                         %{
-                           jQuery('#add_attachment_form').show();
-                           jQuery(this).hide();
-                           jQuery('#add_attachment_form')[0].scrollIntoView();
-                         },
-                         id: 'attach_files_link' %>
-  </p>
-  <%= form_tag(add_attachment_document_path(@document), method: :post, multipart: true, id: "add_attachment_form", style: "display:none;") do %>
-  <div class="box">
-  <p><%= render partial: 'attachments/form' %></p>
-  </div>
-  <%= styled_button_tag l(:button_add), class: "-highlight -with-icon icon-checkmark" %>
-
-  <% end %>
-<% end %>
+<% resource = ::API::V3::Documents::DocumentRepresenter.new(@document,
+                                                            current_user: current_user,
+                                                            embed_links: true) %>
 
+<attachments data-resource="<%= resource.to_json %>" data-allow-uploading="false"></attachments>
diff --git a/frontend/module/hal/resources/document-resource.ts b/frontend/module/hal/resources/document-resource.ts
index 562d44926b..7bd122747e 100644
--- a/frontend/module/hal/resources/document-resource.ts
+++ b/frontend/module/hal/resources/document-resource.ts
@@ -40,9 +40,11 @@ export interface DocumentResourceLinks {
 
 class DocumentBaseResource extends HalResource {
     public $links:DocumentResourceLinks;
+
+    private attachmentsBackend = false;
 }
 
 export const DocumentResource = Attachable(DocumentBaseResource);
 
-export interface DocumentResource extends DocumentResourceLinks {
+export interface DocumentResource extends DocumentBaseResource {
 }
diff --git a/frontend/module/main.ts b/frontend/module/main.ts
index a7e7f92535..503c7f5e3a 100644
--- a/frontend/module/main.ts
+++ b/frontend/module/main.ts
@@ -32,6 +32,7 @@
 import {APP_INITIALIZER, Injector, NgModule} from '@angular/core';
 import {OpenProjectPluginContext} from "core-app/modules/plugins/plugin-context";
 import {DocumentResource} from './hal/resources/document-resource';
+import {multiInput} from 'reactivestates';
 
 export function initializeDocumentPlugin() {
     return () => {
@@ -39,6 +40,9 @@ export function initializeDocumentPlugin() {
             .then((pluginContext:OpenProjectPluginContext) => {
                 let halResourceService = pluginContext.services.halResource;
                 halResourceService.registerResource('Document', { cls: DocumentResource });
+
+                let states = pluginContext.services.states;
+                states.add('documents', multiInput<DocumentResource>());
             });
     };
 }
diff --git a/lib/api/v3/documents/document_representer.rb b/lib/api/v3/documents/document_representer.rb
index cecc6ee2f8..7ff06406c6 100644
--- a/lib/api/v3/documents/document_representer.rb
+++ b/lib/api/v3/documents/document_representer.rb
@@ -34,24 +34,11 @@ module API
     module Documents
       class DocumentRepresenter < ::API::Decorators::Single
         include API::Decorators::LinkedResource
+        include API::Caching::CachedRepresenter
+        include ::API::V3::Attachments::AttachableRepresenterMixin
 
         self_link title_getter: ->(*) { represented.title }
 
-        link :attachments do
-          {
-            href: api_v3_paths.attachments_by_document(represented.id)
-          }
-        end
-
-        link :addAttachment do
-          next unless current_user_allowed_to(:manage_documents, context: represented.project)
-
-          {
-            href: api_v3_paths.attachments_by_document(represented.id),
-            method: :post
-          }
-        end
-
         property :id
 
         property :title
diff --git a/spec/features/attachment_upload_spec.rb b/spec/features/attachment_upload_spec.rb
index 3d5bfdbae9..91bb27f999 100644
--- a/spec/features/attachment_upload_spec.rb
+++ b/spec/features/attachment_upload_spec.rb
@@ -70,6 +70,8 @@ describe 'Upload attachment to documents', js: true do
       editable.find('figure.image figcaption').base.send_keys('Image uploaded on creation')
     end
 
+    expect(page).to have_selector('attachment-list-item', text: 'image.png')
+
     click_on 'Create'
 
     expect(page).to have_selector('#content img', count: 1)
@@ -77,8 +79,6 @@ describe 'Upload attachment to documents', js: true do
 
     click_on 'New documentation'
 
-    expect(page).to have_selector('.attachments', text: 'image.png')
-
     within '.toolbar-items' do
       click_on 'Edit'
     end
@@ -91,11 +91,13 @@ describe 'Upload attachment to documents', js: true do
       editable.find('figure.image figcaption').base.send_keys('Image uploaded the second time')
     end
 
+    expect(page).to have_selector('attachment-list-item', text: 'image.png', count: 2)
+
     click_on 'Save'
 
     expect(page).to have_selector('#content img', count: 2)
     expect(page).to have_content('Image uploaded on creation')
     expect(page).to have_content('Image uploaded the second time')
-    expect(page).to have_selector('.attachments a', text: 'image.png', count: 2)
+    expect(page).to have_selector('attachment-list-item', text: 'image.png', count: 2)
   end
 end