integrate uploading with filesystem

deployment/scripts/dashboard.ts

@@ -1,11 +1,4 @@
 import { InitDocumentSelector } from '../../src/Dashboard/DocumentSelector';
-import { InitUploadArea } from '../../src/Dashboard/UploadArea';
 
 InitDocumentSelector();
-
-document.querySelector('#upload-new-doc-button')?.addEventListener('click', function() {
-  InitUploadArea();
-});
-
-document.querySelector('#home-link')?.setAttribute('href', __LINK_LOCATION__);
-
+document.querySelector('#home-link')?.setAttribute('href', __LINK_LOCATION__);

src/Dashboard/DocumentSelector.ts

@@ -1,8 +1,9 @@
 import { IEntry, IFile, IFolder, fs_functions } from './FileSystem';
 import { deleteEntry } from './Storage';
-import { formatFilename } from './functions';
+import { formatFilename } from './upload_functions';
 import FileSystemManager from './FileSystem/FileSystemManager';
 import ShiftSelectionManager from './ShiftSelectionManager';
+import { InitUploadArea } from './UploadArea';
 
 const documentsContainer: HTMLDivElement = document.querySelector('#fs-content-container');
 const backgroundArea: HTMLDivElement = document.querySelector('#main-section-content');
@@ -12,6 +13,8 @@ const deleteButton: HTMLButtonElement = document.querySelector('#remove-doc');
 const navBackButton: HTMLButtonElement = document.querySelector('#fs-back-btn');
 const navPathContainer: HTMLDivElement = document.querySelector('#nav-path-container');
 
+const uploadDocumentsButton = document.querySelector('#upload-new-doc-button');
+
 const shiftSelection = new ShiftSelectionManager();
 
 let currentPath: IFolder[]; // to get current Folder: currentPath.at(-1)
@@ -54,6 +57,10 @@ backgroundArea!.addEventListener('click', (e) => {
   }
 });
 
+uploadDocumentsButton!.addEventListener('click', function() {
+  InitUploadArea(currentPath.at(-1));
+});
+
 // gets user selected filenames
 function getSelectionFilenames() {
   return orderedEntries.filter((_, idx) => orderedSelection[idx]);

src/Dashboard/FileSystem/fs_functions.ts

@@ -89,6 +89,11 @@ const removeEntry = (entry: IEntry, parent: IFolder): boolean => {
     return true;
 }
 
+const getAllNames = (folder: IFolder) => {
+    const names = folder.content.map(entry => entry.name);
+    return names;
+}
+
 export const fs_functions = {
     createRoot: createRoot,
     createFolder: createFolder,
@@ -97,5 +102,6 @@ export const fs_functions = {
     addEntry: addEntry,
     removeEntry: removeEntry,
     addMetadata: addMetadata,
-    removeMetadata: removeMetadata
+    removeMetadata: removeMetadata,
+    getAllNames: getAllNames
 }

src/Dashboard/Storage.ts

@@ -24,15 +24,10 @@ export async function fetchUploadedDocuments(): Promise<string[]> {
     });
 }
 
-// DELETEONCEDONE
-// export function fetchSampleDocuments(): string[] {
-//   return samples;
-// }
-
-export function createManifest(name: string, mei: File, bg: File): Promise<any> {
+export function createManifest(id: string, name: string, mei: File, bg: File) {
   return new Promise(async (resolve) => {
     const manifest = JSON.parse(JSON.stringify(localManifest));
-    manifest['@id'] = uuidv4();
+    manifest['@id'] = id;
     manifest['title'] = name;
     manifest['timestamp'] = (new Date()).toISOString();
 
@@ -43,6 +38,7 @@ export function createManifest(name: string, mei: File, bg: File): Promise<any>
       });
       meiReader.readAsDataURL(mei);
     });
+
     const bgPromise = new Promise(resolve => {
       const bgReader = new FileReader();
       bgReader.addEventListener('load', () => {
@@ -53,6 +49,7 @@ export function createManifest(name: string, mei: File, bg: File): Promise<any>
 
     const meiUri = await meiPromise;
     const bgUri = await bgPromise;
+
     manifest['image'] = bgUri;
     manifest['mei_annotations'] = [
       {
@@ -66,21 +63,21 @@ export function createManifest(name: string, mei: File, bg: File): Promise<any>
   });
 }
 
-export function addEntry(title: string, content: Blob, single: boolean): Promise<boolean> {
+export function addEntry(id: string, title: string, content: Blob, single: boolean): Promise<boolean> {
   return new Promise((resolve, reject) => {
     db.put({
-      _id: title,
-      kind: single ? 'page' : 'manuscript',
+      _id: id,
+      kind: single ? 'page' : 'manuscript', // TODO: make enum file type
       _attachments: {
         manifest: {
           content_type: 'application/ld+json',
           data: content
         }
       }
-    }).then(_ => {
+    }).then(() => {
       resolve(true);
     }).catch(err => {
-      window.alert(`Error Uploading Document: ${err.message}, ${title}.`);
+      window.alert(`Error Uploading Document: ${err.message}, title: ${title}, id: ${id}.`);
       reject(false);
     });
   });

src/Dashboard/UploadArea.ts

@@ -1,39 +1,40 @@
-import { addNewFiles } from './UploadManager';
 import { ModalWindow, ModalWindowView } from '../utils/ModalWindow';
-import { handleUploadAllDocuments, handleMakePair } from './UploadManager';
+import { addNewFiles, handleUploadAllDocuments, handleMakePair } from './upload_functions';
 import { updateDocumentSelector } from './DocumentSelector';
+import { IFolder } from './FileSystem';
 
-export function InitUploadArea(): void {
+async function handleUploadUpdate(modalWindow: ModalWindow, currentFolder: IFolder) {
+  const spinner = document.querySelector('#uploading_spinner');
+  spinner.classList.add('visible');
+
+  handleUploadAllDocuments(currentFolder)
+    .then( () => {
+      setTimeout( async () => {
+        await updateDocumentSelector();
+        spinner.classList.remove('visible');
+        modalWindow.hideModalWindow();
+      }, 2000);
+    })
+    .catch( (error) => {
+      console.log('One or more uploads rejected: ', error);
+      setTimeout( async () => {
+        await updateDocumentSelector();
+        spinner.classList.remove('visible');
+        modalWindow.hideModalWindow();
+      }, 2000);
+    });
+}
+
+export function InitUploadArea(currentFolder: IFolder): void {
   // generate modal window
   const modalWindow = new ModalWindow();
   modalWindow.setModalWindowView(ModalWindowView.DOCUMENT_UPLOAD);
   modalWindow.openModalWindow();
 
   document.querySelector('#make_pair')!.addEventListener('click', handleMakePair);
+  document.querySelector('#upload_button')!.addEventListener('click', () => handleUploadUpdate(modalWindow, currentFolder));
 
-  document.querySelector('#upload_button')!.addEventListener('click', async function uploadAndUpdate() {
-    const spinner = document.querySelector('#uploading_spinner');
-    spinner.classList.add('visible');
-
-    handleUploadAllDocuments()
-      .then( () => {
-        setTimeout( async () => {
-          await updateDocumentSelector();
-          spinner.classList.remove('visible');
-          modalWindow.hideModalWindow();
-        }, 2000);
-      })
-      .catch( (error) => {
-        console.log('One or more uploads rejected: ', error);
-        setTimeout( async () => {
-          await updateDocumentSelector();
-          spinner.classList.remove('visible');
-          modalWindow.hideModalWindow();
-        }, 2000);
-      });
-  });
-
-  // File System selector when clicking on upload area
+  // request user file system when clicking on upload area
   const fileSelector = document.createElement('input');
   fileSelector.type = 'file';
   fileSelector.multiple = true;

src/Dashboard/FileManager.ts → src/Dashboard/UploadFileManager.ts

@@ -1,8 +1,8 @@
 /**
- * Singleton management system, use getInstance() to retrieve instance.
+ * Manager for file uploading and pairing process
  */
-class FileManager {
-  private static instance: FileManager;
+class UploadFileManager {
+  private static instance: UploadFileManager;
 
   private allFiles = new Map<string, {file: File, count: number}>();
   private folios = new Array<folio>(); // filename, mei_filename, image_filename
@@ -11,11 +11,11 @@ class FileManager {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private constructor() {}
 
-  public static getInstance(): FileManager {
-    if (!FileManager.instance) {
-      FileManager.instance = new FileManager();
+  public static getInstance(): UploadFileManager {
+    if (!UploadFileManager.instance) {
+      UploadFileManager.instance = new UploadFileManager();
     }
-    return FileManager.instance;
+    return UploadFileManager.instance;
   }
 
   public addFile(file: File): void {
@@ -111,7 +111,7 @@ class FileManager {
   }
 }
 
-export default FileManager;
+export default UploadFileManager;
 
 type folio = {
   filename: string,