diff --git a/hypha/apply/projects/forms/project.py b/hypha/apply/projects/forms/project.py
index b967c98022e550d38d3ee01b945b50791cbe7207..f503671a19a49ca20e0d91cf3b08511b3ef3d380 100644
--- a/hypha/apply/projects/forms/project.py
+++ b/hypha/apply/projects/forms/project.py
@@ -2,8 +2,10 @@ from django import forms
 from django.contrib.auth import get_user_model
 from django.db.models import Q
 from django.utils.translation import gettext_lazy as _
+from django_file_form.forms import FileFormMixin
 
 from hypha.apply.funds.models import ApplicationSubmission
+from hypha.apply.stream_forms.fields import SingleFileField
 from hypha.apply.stream_forms.forms import StreamBaseForm
 from hypha.apply.users.groups import STAFF_GROUP_NAME
 
@@ -166,7 +168,9 @@ class StaffUploadContractForm(forms.ModelForm):
         model = Contract
 
 
-class UploadDocumentForm(forms.ModelForm):
+class UploadDocumentForm(FileFormMixin, forms.ModelForm):
+    document = SingleFileField(label=_('Document'), required=True)
+
     class Meta:
         fields = ['title', 'category', 'document']
         model = PacketFile
diff --git a/hypha/apply/projects/templates/application_projects/project_detail.html b/hypha/apply/projects/templates/application_projects/project_detail.html
index f5188d9111b44d64223c1acc271361297a6784ed..aae7ba9cacedfd21ebd95ba1e83e70c00fc10b02 100644
--- a/hypha/apply/projects/templates/application_projects/project_detail.html
+++ b/hypha/apply/projects/templates/application_projects/project_detail.html
@@ -250,7 +250,6 @@
 
 {% block extra_js %}
     <script src="{% static 'js/apply/tabs.js' %}"></script>
-    <script src="{% static 'js/apply/list-input-files.js' %}"></script>
     <script src="{% static 'js/apply/edit-comment.js' %}"></script>
     <script src="{% static 'js/apply/toggle-payment-block.js' %}"></script>
     <script src="{% static 'js/apply/past-reports-pagination.js' %}"></script>
diff --git a/hypha/static_src/src/javascript/apply/list-input-files.js b/hypha/static_src/src/javascript/apply/list-input-files.js
deleted file mode 100644
index 4ac805e779cd581d1d8cb1d4bcb8552dcebbde75..0000000000000000000000000000000000000000
--- a/hypha/static_src/src/javascript/apply/list-input-files.js
+++ /dev/null
@@ -1,20 +0,0 @@
-(function ($) {
-
-    'use strict';
-
-    function listInputFiles() {
-        $('input[type=file]').change(function () {
-            // remove any existing files first
-            $(this).siblings('.form__file').remove();
-            for (let i = 0; i < $(this)[0].files.length; ++i) {
-                $(this).parents('.form__item').prepend(`
-                    <p class="form__file">${$(this)[0].files[i].name}</p>
-                `);
-            }
-        });
-    }
-
-    // Show list of selected files for upload on input[type=file]
-    listInputFiles();
-
-})(jQuery);