Small fixes and documentation updates

README.md

@@ -2,75 +2,52 @@
 
 ## This is an early workflow for: 
 1. Setting up and locally hosting Solid pod
-2. Viewing your pod and uploading data into that pod via the TRIPLE App
+2. Uploading data into that pod via the TRIPLE App
+3. Future aims -- see pod contents, edit data privacy, query data via sparql queries
 
 
 #### Requirements:
 - [Node.js](https://nodejs.org/en/)
     -Version 18 or higher.
 
-#### Setting up a local instance of a Solid pod:
-1. Clone this git repo
+#### Getting:
+1. Navigate to the webpage (where there are some nice instructions):
+
+   `https://ecrum19.github.io/TRIPLE_App/`
+
+2. Clone this git repo
 
    `git clone https://github.com/ecrum19/TRIPLE_App.git`
 
 3. Navigate to the created directory
 
    `cd TRIPLE_App/`
 
-5. Execute the following command:
-
-   `bash makePod.sh`
-
-
-#### Setting up the Solid pod
-1. Using a web browser navigate to
-    http://localhost:3000/
-
-2. Click the link: "Sign up for an account"
-
-3. Fill out the fields and click "Register"
-
-4. On the "Your Account" page, click on "Create pod"
-
-5. enter a name for the pod and click "Create pod"
+4. Follow the instructions on the home page of the TRIPLE App website!
 
-6. Return to the home page by clicking "Back"
 
-Voila, you now have a pod hosted by your local machine. Now, let us add something to it!
-
-#### Launching the TRIPLE App
-1. First install all dependencies: 
-
-   `yarn install`
-
-2. launch the web client via a local server (will be URL in the future)
-
-   `yarn serve`
-
-3. Navigate to the webpage at the following URL: http://localhost:8080/
+#### Notes:
+**General issues:**
 
+- The Pod Browser does not work properly yet. That is something that will be implemented in the near future.
+- When uploading a file, the "Success" message will almost always appear (has to do with Promise handling). I will fix this issue and add a loading icon while file is uploading soon as well.
+- If weird things start to happen with athn issues, clear browser history and cookies and it should fix things.
 
 #### TO DO:
 - (Optional) -- 
-  - A. A way for a user to select the pod (view/edit via dropdown)
-  - B. ...
-
-**General issues:**
-
-- I. New pod initialization / old pod re-starting (CSS interface)
-- II. The presence of `<http://www.w3.org/ns/pim/space#storage> <../> .` on User `card$.ttl`
-- III. Web hosting of the application -- github pages
+  - A. ...
+  - B. Fix Pod Browser so that it actually displays pod contents
+
 
 **Data Upload:**
 
 1. A way to designate where a file is uploaded to (i.e. directory structure)
-2. A drag and drop interface
-3. A loading icon (to tell when file upload is done)
+2. A loading icon (to tell when file upload is done)
+3. A way to display document metadata
 
 **Data Browser:**
 
-4. A Pod data browser -- use new Comunica engine
+4. A Pod data browser that actually works...
 5. Designate a way to display the directory structure (along with the files)
 
 **Data Query:**

src/components/PodUpload.vue

@@ -56,34 +56,35 @@
           title="There was an error with the file(s) upload!"
           type="error"
           icon="$error"
-          ><b>Try logging out and logging back in!</b></v-alert
+          ><b
+            >Try logging out and logging back in!</b>(also try clearing browser
+            hostory if problem reoccurs)</v-alert
         >
       </div>
-      <div v-else-if="!initialLoad">
-        <!-- Shows that file upload was successful -->
-        <div v-if="!fileUploaded">
-          <v-alert
-            class="mx-auto"
-            title="File(s) successfully uploaded!"
-            type="success"
-            icon="$success"
-            >(File(s) can be found in the
-            <b>{{ this.pod }}uploads/</b> directory of your pod)</v-alert
-          >
-        </div>
-
-        <!-- Alert for if file upload is not successful -->
-        <div v-else>
-          <v-alert
-            class="mx-auto"
-            title="There was an error with the file(s) upload!"
-            type="error"
-            icon="$error"
-            >There seems to be an error with the file upload. There are some
-            file types not supported in the current implementation. We are
-            working on fixing this currently. Sorry!!</v-alert
-          >
-        </div>
+
+      <!-- Alert forsuccessful file upload -->
+      <div v-else-if="uploadDone">
+        <v-alert
+          class="mx-auto"
+          title="File(s) successfully uploaded!"
+          type="success"
+          icon="$success"
+          >(File(s) can be found in the <b>{{ this.pod }}uploads/</b> directory
+          of your pod)</v-alert
+        >
+      </div>
+
+      <!-- Alert for if file upload is not successful -->
+      <div v-else-if="problem">
+        <v-alert
+          class="mx-auto"
+          title="There was an error with the file(s) upload!"
+          type="error"
+          icon="$error"
+          >There seems to be an error with the file upload. There are some file
+          types not supported in the current implementation. We are working on
+          fixing this currently. Sorry!!</v-alert
+        >
       </div>
     </v-card>
   </v-container>
@@ -102,7 +103,7 @@
 </template>
 
 <script lang="ts">
-import { getPodURLs, handleFiles } from "./fileUpload";
+import { getPodURLs, handleFiles, uploadSuccess } from "./fileUpload";
 import { currentWebId } from "./login";
 
 export default {
@@ -111,9 +112,10 @@ export default {
       webId: "",
       podURLs: [],
       pod: "",
-      fileUploaded: false,
-      initialLoad: true,
+      filesUploaded: [],
+      problem: false,
       files: FileList,
+      uploadDone: false,
     };
   },
   methods: {
@@ -126,26 +128,39 @@ export default {
       this.podURLs = await getPodURLs(this.webId); // calls async function to get Pod URLs
       this.pod = this.podURLs[0]; // can fix this to handle multiple pods (<< FUTURE >>)
     },
+
     /*
   Calls uploadFile() from fileUpload.ts to upload a file to the user's pod.
   obtains 'files' variable (a FileList that contains references to all files selected using the upload UI).
   */
     uploadFile(event: FileList) {
       this.files = event.target.files;
     },
+
+    /*
+  Checks if file is finished uploading. If so, updates the uploadDone variable.
+  */
+    checkUpload():boolean {
+      return uploadSuccess(this.filesUploaded);
+    },
+
     /*
   Calls handleFiles() from fileUpload.ts parse the files selected for upload + uploads the to the pod using the overwriteFile() method from @inrupt/solid-client.
   'files' variable is a FileList that contains references to all files selected using the upload UI.
+
+  Method also checks if the files uploaded from submitUpload() have .name properties (which proves upload was success).
+  Results in update of the uploadSuccess variable if files do have names.
   */
-    submitUpload() {
-      this.fileUploaded = handleFiles(this.files, this.pod);
-      this.initialLoad = false;
+    async submitUpload() {
+      // this.filesUploaded = await handleFiles(this.files, this.pod);
+      this.uploadDone = uploadSuccess(await handleFiles(this.files, this.pod));
     },
   },
   mounted() {
     // Delays the execution of these functions on page reload (to avoid async-related errors)
     setTimeout(() => {
       this.getPodURL();
+      // console.log(this.podURLs)
     }, 200);
   },
   props: {},

src/components/Styling/TheHeader.vue

@@ -120,6 +120,11 @@ export default {
       redirectToLogin();
     },
   },
+  mounted(){
+    setTimeout(() => {
+      this.loginCheck()
+    }, 200);
+  },
   props: {},
 };
 </script>

src/components/fileUpload.ts

@@ -4,14 +4,14 @@
   overwriteFile,
 } from "@inrupt/solid-client";
 import { fetch } from "@inrupt/solid-client-authn-browser";
-
+import { mimeTypes } from "./mime_types.js";
 
 /**
  * Fetches a logged-in user's Pod URLs using a webID.
- * 
+ *
  * @param webid The webID URL of the current user.
  * @returns A Promise that resolves to a string[] of user Pod URLs, if available, or `undefined` if no pods are found.
-*/
+ */
 async function getPodURLs(webid: string): Promise<string[]> {
   let pods: string[] = [];
   try {
@@ -24,54 +24,87 @@
 
 /**
  * Iterates through a FileList and uploads files to a Solid Pod via the uploadToPod() method.
- * 
+ *
  * @param fileList The list of files to be uploaded to the Pod.
  * @param podURL The URL of the Pod files are to be uploaded to.
-*/
-function handleFiles(fileList: FileList, podURL: string) {
+ */
+async function handleFiles(fileList: FileList, podURL: string) {
+  const outputList = [];
   Array.from(fileList).forEach((file: File) => {
-    uploadToPod(`${podURL}uploads/${file.name}`, file, fetch);
+    const upload = uploadToPod(`${podURL}uploads/${file.name}`, file, fetch);
+    outputList.push(upload);
   });
+  // console.log(outputList)
+  return outputList;
 }
 
 /**
- * Takes in a File and upload is to a Solid Pod using the @inrupt/solid-client method overwriteFile().
- * 
+ * Converts a file extension into a MIME Type for use in HTTP PUT requests.
+ * The function relies on the hash map contained in the file 'mime_types.js'.
+ *
+ * @param fileExtension The file extension string of the file for which the MIME Type should be found.
+ * @returns The MIME Type string of the file of interest or 'application/octet-stream' if not in the hash map.
+ */
+function getMimeType(fileExtension: string) {
+  return mimeTypes[fileExtension.toLowerCase()] || "application/octet-stream";
+}
+
+/**
+ * Takes in a File and uploads it to a Solid Pod using the @inrupt/solid-client method overwriteFile().
+ *
  * The directory designated in targetURL does not need to exist before execuation.
+ * The contentType of the uploaded file is determined by the getMineType() method using the file's extension.
  * The overwriteFile() method will create the conatiner (directory) path if it does not already exist.
- * 
+ *
  * @param targetURL The URL where the files are to be uploaded.
  * @param file The file that is to be uploaded to the Pod.
  * @param fetch A window.fetch that includes the current User's credentials (to allow for Write access).
- * @returns A Promise that resolves to a string[] of user Pod URLs, if available, or `undefined` if no pods are found.
-*/
-async function uploadToPod(targetURL: string, file: File, fetch): Promise<boolean> {
-  if (file.type != '') {
-    // for if the file type is captured by the well-known "secret codes"
-    try {
-      const savedFile = await overwriteFile(targetURL, file, {
-        contentType: file.type,
-        fetch: fetch,
-      });
-      console.log(`File saved at ${targetURL}`);
-      console.log(savedFile)
-      return true
-    } catch (error) {
-      console.error(error);
-    }
-  } else {
-    // for if the file type is not captured by the well-known "secret codes"
-    try {
-      const savedFile = await overwriteFile(targetURL, file, {
-        fetch: fetch,
-      });
-      console.log(`File saved at ${targetURL}`);
-      console.log(savedFile)
-      return true
-    } catch (error) {
-      console.error(error);
+ * @returns A Promise that resolves to a File & WithResourceInfo of the uploaded files.
+ */
+async function uploadToPod(
+  targetURL: string,
+  file: File,
+  fetch
+): Promise<string> {
+  try {
+    const savedFile = await overwriteFile(targetURL, file, {
+      contentType: getMimeType('.' + file.name.split('.')[file.name.split('.').length - 1]),
+      fetch: fetch,
+    });
+    // console.log(`File saved at ${targetURL}`);
+    // console.log(savedFile); // Type of this file is <File & WithResourceInfo>
+    return savedFile.internal_resourceInfo.sourceIri;
+  } catch (error) {
+    console.error(error);
+    return "error";
+  }
+}
+
+/**
+ * Checks if the files uploaded from submitUpload() have .name properties (which proves upload was success).
+ * 
+ * @param uploadedFiles is a list of files obtained from the upload process
+ * @returns a boolean value that indicated if the file uploads have been successful or not
+ */
+function uploadSuccess(uploadedFiles: string[]): boolean {
+  let success = false;
+  Array.from(uploadedFiles).forEach((up: string) => {
+    console.log(up)
+    if (up !== undefined) {
+      success = true
+    } else {
+      success = false
     }
+  });
+  return success
+}
+
+function derefrenceFile(inputFile: File & WithResourceInfo): string[] {
+  try {
+    return [inputFile.name, String(inputFile.size), inputFile.internal_resourceInfo.sourceIri]
+  } catch (error) {
+    console.error('Error', error)
   }
 }
 
-export { handleFiles, getPodURLs };
+export { handleFiles, getPodURLs, getMimeType, uploadSuccess, derefrenceFile };