DOKY-146 Upload a new file to document (#109)

* DOKY-146 Upload a new file to document

Improve API request header generation

Enhancements in the process of generating headers in API requests occurred, with functionalities now split into two separate functions: one that manages authorization headers, and another which handles content-type headers. Increased code clarity and maintainability are expected benefits.

Update local development base URL and refine API request methods

The base URL for local development has been changed from port 8119 to 8080. Improvements have been made to the API request methods to handle different content-type more efficiently. The `prepareBody` function was removed, and data is now directly stringified, streamlining the code and offering increased flexibility in managing various content-types.

Incorporate `documentId` within `SingleFileUploader`

Updates were made to the `SingleFileUploader` component, namely with the addition of a `documentId` parameter. This change enhances the file uploading feature in the application, as tracking of the uploaded document is now possible. The form using this component has also been adjusted to provide the `documentId`.

* Fix formatting issues and clean up unused console logs

Corrected inconsistent quotation marks and improved indentation in various files. Removed unused console logs and added TODO comments to enhance future development.

* Add file upload support in `EditDocumentForm`

Refactor `SingleFileUploader` to `FileUploader` with upload functionality. Integrated new upload handler in `EditDocumentForm` to handle document uploads, including toast notifications upon success or failure. Simplified async call in `postFormData` to return fetch promise.

* Remove `documentId` prop from `FileUploader`

The `documentId` prop in the `FileUploader` component was redundant and has been removed.

.gitignore

@@ -46,3 +46,4 @@ server/out
 /server/src/main/resources/static/
 /server/property 'buildDir'/
 /filestorage/
+**/.DS_Store

server/doky-front/src/api/config.local.js

@@ -1 +1 @@
-export const BASE_URL = 'http://localhost:8119';
+export const BASE_URL = 'http://localhost:8080';

server/doky-front/src/api/documents.js

@@ -1,4 +1,4 @@
-import {get, post, put} from './request';
+import {get, post, postFormData, put} from './request';
 
 const RESOURCE_NAME = 'documents';
 
@@ -9,3 +9,5 @@ export const getDocument = id => get(`${RESOURCE_NAME}/${id}`);
 export const createDocument = payload => post(RESOURCE_NAME, payload);
 
 export const updateDocument = payload => put(`${RESOURCE_NAME}/${payload.id}`, payload);
+
+export const uploadDocument = (documentId, formData) => postFormData(`${RESOURCE_NAME}/${documentId}/upload`, formData);

server/doky-front/src/api/request.js

@@ -2,25 +2,25 @@ import {BASE_URL} from 'config';
 
 const apiPrefix = '/api';
 
-const HEADERS = {
-  'Content-Type': 'application/json'
+const getAuthHeader = () => {
+  const jwt = localStorage.getItem('jwt');
+  return jwt ? {Authorization: `Bearer ${jwt}`} : {};
 };
 
-const getHeaders = () => {
-  const jwt = localStorage.getItem('jwt');
-  return jwt ? {
-    Authorization: `Bearer ${jwt}`,
-    ...HEADERS
-  } : HEADERS;
+const getContentTypeHeader = (contentType) => {
+  return contentType ? {'Content-Type': contentType} : {};
 };
 
-const getDefaultOptions = () => ({
-  headers: getHeaders()
+const getDefaultOptions = (contentType) => ({
+  headers: {
+    ...getAuthHeader(),
+    ...getContentTypeHeader(contentType)
+  }
 });
 
 const request = async (url, method, data = {}) => {
   const response = await fetch(BASE_URL + apiPrefix + '/' + url, {
-    ...getDefaultOptions(),
+    ...getDefaultOptions('application/json'),
     method,
     body: JSON.stringify(data)
   });
@@ -35,6 +35,14 @@ const request = async (url, method, data = {}) => {
 export const post = (url, data = {}) =>
   request(url, 'POST', data);
 
+export const postFormData = (url, formData = {}) => {
+  return fetch(BASE_URL + apiPrefix + '/' + url, {
+    ...getDefaultOptions(),
+    method: 'POST',
+    body: formData
+  });
+};
+
 export const put = async (url, data = {}) =>
   request(url, 'PUT', data);
 

server/doky-front/src/components/formComponents/FileUploader.jsx

@@ -0,0 +1,36 @@
+import React, {useId, useState} from 'react';
+
+const FileUploader = ({onUpload}) => {
+
+  const [file, setFile] = useState(null);
+  const id = useId();
+  const inputId = `file-input-${id}`;
+
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleUpload = () => {
+    const formData = new FormData();
+    formData.append('file', file);
+    onUpload(formData);
+  };
+
+  return (
+    <>
+      <div className="mt-4">
+        <label htmlFor={inputId} className="form-label">Select file to upload:</label>
+        <input className="form-control" type="file" id={inputId} onChange={handleFileChange}/>
+      </div>
+      {file &&
+        <button type="button" className="btn btn-outline-primary me-2 mt-2" onClick={handleUpload}>
+          <i className="bi bi-cloud-upload me-1"></i><span>Upload</span>
+        </button>
+      }
+    </>
+  );
+};
+
+export default FileUploader;

server/doky-front/src/pages/Documents/EditDocumentForm/EditDocumentForm.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import HorizontalFormInput from '../../../components/formComponents/HorizontalFormInput.jsx';
-import HorizontalFormText from '../../../components/formComponents/HorizontalFormText.jsx';
 import {useAddToast} from '../../../components/Toasts';
 import {useMutation} from '../../../hooks/useMutation.js';
-import {updateDocument} from '../../../api/documents.js';
+import {updateDocument, uploadDocument} from '../../../api/documents.js';
 import {useForm} from '../../../hooks/useForm.js';
 import AlertError from '../../../components/AlertError.jsx';
+import HorizontalFormInput from '../../../components/formComponents/HorizontalFormInput.jsx';
+import HorizontalFormText from '../../../components/formComponents/HorizontalFormText.jsx';
+import FileUploader from '../../../components/formComponents/FileUploader.jsx';
 
 const EditDocumentForm = ({document}) => {
   const [editDocument, {isLoading}] = useMutation(updateDocument);
@@ -15,6 +16,21 @@ const EditDocumentForm = ({document}) => {
     addToast('saved');
   });
 
+  const onUpload = async (formData) => {
+
+    try {
+      const response = await uploadDocument(document.id, formData);
+      if (response.ok) {
+        addToast('uploaded');
+      } else {
+        console.error(response);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+  };
+
   return (
     <div className="container-fluid">
       <div className="row">
@@ -29,12 +45,10 @@ const EditDocumentForm = ({document}) => {
               <div>File:</div>
               <div>{document.fileName}</div>
               <div>
-                <button type="button" className="btn btn-outline-primary me-2">
-                  <i className="bi bi-cloud-upload me-1"></i><span>Upload New</span>
-                </button>
                 <button type="button" className="btn btn-outline-primary me-2" disabled={!document.fileName}>
                   <i className="bi bi-cloud-download me-1"></i><span>Download</span>
                 </button>
+                <FileUploader onUpload={onUpload}/>
               </div>
             </div>
             <div className="d-flex justify-content-between py-2 mt-5 border-top">

server/src/main/resources/application-local.properties

@@ -13,6 +13,7 @@ spring.mail.username=""
 spring.mail.password=""
 # spa resources routing
 doky.static.caching=false
+spring.web.resources.cache.period=0s
 
 
 logging.level.web=DEBUG