diff --git a/frontend/components/incompleteupload/Editor.vue b/frontend/components/incompleteupload/Editor.vue
new file mode 100644
index 0000000..365629d
--- /dev/null
+++ b/frontend/components/incompleteupload/Editor.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { type EditorIncompleteUpload } from '@/lib/editor'
+
+interface Props {
+  editorIncompleteUpload: EditorIncompleteUpload
+}
+interface Emits {
+  (e: 'update:editorIncompleteUpload', ei: EditorIncompleteUpload): void
+}
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const model = computed({
+  get: () => props.editorIncompleteUpload,
+  set: (editorIncompleteUpload: EditorIncompleteUpload) => { emit('update:editorIncompleteUpload', editorIncompleteUpload) },
+})
+</script>
+
+<template>
+  <div>
+    <FormEditorField
+      help-text="The name of this uploaded source file."
+      :editor-field="model.name"
+    >
+      <PVInputText
+        v-model="model.name.currentValue"
+      />
+    </FormEditorField>
+    <FormEditorField
+      help-text="The description of this upload - helpful for record keeping, not used for anything."
+      :editor-field="model.description"
+    >
+      <PVTextarea
+        v-model="model.description.currentValue"
+        auto-resize
+      />
+    </FormEditorField>
+    <FormEditorField
+      help-text="When enabled, this upload can be accessed by administrators to help with debugging. Only turn this on if you're comfortable with system administrators accessing this data."
+      :editor-field="model.adminDebugEnabled"
+    >
+      <ExplicitInputSwitch
+        v-model:value="model.adminDebugEnabled.currentValue"
+        on-label="Administrator Debugging Access Enabled"
+        off-label="No Administrator Access Enabled"
+      />
+    </FormEditorField>
+  </div>
+</template>
diff --git a/frontend/components/portfolio/Editor.vue b/frontend/components/portfolio/Editor.vue
new file mode 100644
index 0000000..d06c02c
--- /dev/null
+++ b/frontend/components/portfolio/Editor.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { type EditorPortfolio } from '@/lib/editor'
+
+interface Props {
+  editorPortfolio: EditorPortfolio
+}
+interface Emits {
+  (e: 'update:editorPortfolio', ei: EditorPortfolio): void
+}
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const model = computed({
+  get: () => props.editorPortfolio,
+  set: (editorPortfolio: EditorPortfolio) => { emit('update:editorPortfolio', editorPortfolio) },
+})
+</script>
+
+<template>
+  <div>
+    <FormEditorField
+      help-text="The name of this portfolio."
+      :editor-field="model.name"
+    >
+      <PVInputText
+        v-model="model.name.currentValue"
+      />
+    </FormEditorField>
+    <FormEditorField
+      help-text="The description of this portfolio - helpful for record keeping, not used for anything."
+      :editor-field="model.description"
+    >
+      <PVTextarea
+        v-model="model.description.currentValue"
+        auto-resize
+      />
+    </FormEditorField>
+    <FormEditorField
+      help-text="When enabled, this portfolio can be accessed by administrators to help with debugging. Only turn this on if you're comfortable with system administrators accessing this data."
+      :editor-field="model.adminDebugEnabled"
+    >
+      <ExplicitInputSwitch
+        v-model:value="model.adminDebugEnabled.currentValue"
+        on-label="Administrator Debugging Access Enabled"
+        off-label="No Administrator Access Enabled"
+      />
+    </FormEditorField>
+  </div>
+</template>
diff --git a/frontend/composables/useTime.ts b/frontend/composables/useTime.ts
index 466dda9..bb7a604 100644
--- a/frontend/composables/useTime.ts
+++ b/frontend/composables/useTime.ts
@@ -33,17 +33,9 @@ export const useTime = () => {
     })
   }
 
-  const humanReadableDateLongFromStandardString = (s: string): ComputedRef<string> => {
-    return humanReadableDateLong(new Date(Date.parse(s)))
-  }
-
-  const humanReadableDateFromStandardString = (s: string): ComputedRef<string> => {
-    return humanReadableDate(new Date(Date.parse(s)))
-  }
-
-  const humanReadableTimeFromStandardString = (asStr: string): ComputedRef<string> => {
-    return humanReadableTime(new Date(Date.parse(asStr)))
-  }
+  const humanReadableDateLongFromStandardString = (s: string): ComputedRef<string> => humanReadableDateLong(new Date(Date.parse(s)))
+  const humanReadableDateFromStandardString = (s: string): ComputedRef<string> => humanReadableDate(new Date(Date.parse(s)))
+  const humanReadableTimeFromStandardString = (asStr: string): ComputedRef<string> => humanReadableTime(new Date(Date.parse(asStr)))
 
   const humanReadableTimeWithSeconds = (t: Date): ComputedRef<string> => {
     return computed(() => {
diff --git a/frontend/lib/editor/incomplete_upload.ts b/frontend/lib/editor/incomplete_upload.ts
new file mode 100644
index 0000000..454400e
--- /dev/null
+++ b/frontend/lib/editor/incomplete_upload.ts
@@ -0,0 +1,75 @@
+import { type IncompleteUpload } from '@/openapi/generated/pacta'
+import { Validation, type EditorFieldsFor, type EditorComputedValues } from './common'
+import { getEditorComputedValues } from './utils'
+
+export type EditorIncompleteUpload = EditorFieldsFor<IncompleteUpload>
+
+const createEditorIncompleteUpload = (incompleteUpload: IncompleteUpload): EditorIncompleteUpload => {
+  return {
+    id: {
+      name: 'id',
+      label: 'ID',
+      originalValue: incompleteUpload.id,
+      currentValue: incompleteUpload.id,
+    },
+    name: {
+      name: 'name',
+      label: 'Name',
+      validation: [Validation.NotEmpty],
+      originalValue: incompleteUpload.name,
+      currentValue: incompleteUpload.name,
+    },
+    description: {
+      name: 'description',
+      label: 'Description',
+      originalValue: incompleteUpload.description,
+      currentValue: incompleteUpload.description,
+    },
+    adminDebugEnabled: {
+      name: 'adminDebugEnabled',
+      label: 'Admin Debugging Enabled',
+      originalValue: incompleteUpload.adminDebugEnabled,
+      currentValue: incompleteUpload.adminDebugEnabled,
+    },
+    holdingsDate: {
+      name: 'holdingsDate',
+      label: 'Holdings Date',
+      originalValue: incompleteUpload.holdingsDate,
+      currentValue: incompleteUpload.holdingsDate,
+    },
+    createdAt: {
+      name: 'createdAt',
+      label: 'Created At',
+      originalValue: incompleteUpload.createdAt,
+      currentValue: incompleteUpload.createdAt,
+    },
+    ranAt: {
+      name: 'ranAt',
+      label: 'Ran At',
+      originalValue: incompleteUpload.ranAt,
+      currentValue: incompleteUpload.ranAt,
+    },
+    completedAt: {
+      name: 'completedAt',
+      label: 'Completed At',
+      originalValue: incompleteUpload.completedAt,
+      currentValue: incompleteUpload.completedAt,
+    },
+    failureMessage: {
+      name: 'failureMessage',
+      label: 'Failure Message',
+      originalValue: incompleteUpload.failureMessage,
+      currentValue: incompleteUpload.failureMessage,
+    },
+    failureCode: {
+      name: 'failureCode',
+      label: 'Failure Code',
+      originalValue: incompleteUpload.failureCode,
+      currentValue: incompleteUpload.failureCode,
+    },
+  }
+}
+
+export const incompleteUploadEditor = (i: IncompleteUpload): EditorComputedValues<IncompleteUpload> => {
+  return getEditorComputedValues(`lib/editor/incompleteUpload[${i.id}]`, i, createEditorIncompleteUpload)
+}
diff --git a/frontend/lib/editor/index.ts b/frontend/lib/editor/index.ts
index d859882..15b13ed 100644
--- a/frontend/lib/editor/index.ts
+++ b/frontend/lib/editor/index.ts
@@ -2,3 +2,5 @@ export * from './common'
 export * from './initiative'
 export * from './pacta_version'
 export * from './user'
+export * from './incomplete_upload'
+export * from './portfolio'
diff --git a/frontend/lib/editor/portfolio.ts b/frontend/lib/editor/portfolio.ts
new file mode 100644
index 0000000..c2eedc5
--- /dev/null
+++ b/frontend/lib/editor/portfolio.ts
@@ -0,0 +1,57 @@
+import { type Portfolio } from '@/openapi/generated/pacta'
+import { Validation, type EditorFieldsFor, type EditorComputedValues } from './common'
+import { getEditorComputedValues } from './utils'
+
+export type EditorPortfolio = EditorFieldsFor<Portfolio>
+
+const createEditorPortfolio = (portfolio: Portfolio): EditorPortfolio => {
+  return {
+    id: {
+      name: 'id',
+      label: 'ID',
+      originalValue: portfolio.id,
+      currentValue: portfolio.id,
+    },
+    name: {
+      name: 'name',
+      label: 'Name',
+      validation: [Validation.NotEmpty],
+      originalValue: portfolio.name,
+      currentValue: portfolio.name,
+    },
+    description: {
+      name: 'description',
+      label: 'Description',
+      originalValue: portfolio.description,
+      currentValue: portfolio.description,
+    },
+    adminDebugEnabled: {
+      name: 'adminDebugEnabled',
+      label: 'Admin Debugging Enabled',
+      originalValue: portfolio.adminDebugEnabled,
+      currentValue: portfolio.adminDebugEnabled,
+    },
+    holdingsDate: {
+      name: 'holdingsDate',
+      label: 'Holdings Date',
+      originalValue: portfolio.holdingsDate,
+      currentValue: portfolio.holdingsDate,
+    },
+    createdAt: {
+      name: 'createdAt',
+      label: 'Created At',
+      originalValue: portfolio.createdAt,
+      currentValue: portfolio.createdAt,
+    },
+    numberOfRows: {
+      name: 'numberOfRows',
+      label: 'Number of Rows',
+      originalValue: portfolio.numberOfRows,
+      currentValue: portfolio.numberOfRows,
+    },
+  }
+}
+
+export const portfolioEditor = (i: Portfolio): EditorComputedValues<Portfolio> => {
+  return getEditorComputedValues(`lib/editor/portfolio[${i.id}]`, i, createEditorPortfolio)
+}
diff --git a/frontend/lib/filesize/index.ts b/frontend/lib/filesize/index.ts
new file mode 100644
index 0000000..bd63c96
--- /dev/null
+++ b/frontend/lib/filesize/index.ts
@@ -0,0 +1,9 @@
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return 'Empty'
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+
+  const k = 1024
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
diff --git a/frontend/openapi/generated/pacta/index.ts b/frontend/openapi/generated/pacta/index.ts
index 2462bfa..a157015 100644
--- a/frontend/openapi/generated/pacta/index.ts
+++ b/frontend/openapi/generated/pacta/index.ts
@@ -10,7 +10,13 @@ export { CancelablePromise, CancelError } from './core/CancelablePromise';
 export { OpenAPI } from './core/OpenAPI';
 export type { OpenAPIConfig } from './core/OpenAPI';
 
+export type { CompletePortfolioUploadReq } from './models/CompletePortfolioUploadReq';
+export type { CompletePortfolioUploadReqItem } from './models/CompletePortfolioUploadReqItem';
+export type { CompletePortfolioUploadResp } from './models/CompletePortfolioUploadResp';
 export type { Error } from './models/Error';
+export type { HoldingsDate } from './models/HoldingsDate';
+export type { IncompleteUpload } from './models/IncompleteUpload';
+export type { IncompleteUploadChanges } from './models/IncompleteUploadChanges';
 export { Initiative } from './models/Initiative';
 export { InitiativeChanges } from './models/InitiativeChanges';
 export { InitiativeCreate } from './models/InitiativeCreate';
@@ -19,12 +25,22 @@ export type { InitiativeInvitationCreate } from './models/InitiativeInvitationCr
 export type { InitiativeUserRelationship } from './models/InitiativeUserRelationship';
 export type { InitiativeUserRelationshipChanges } from './models/InitiativeUserRelationshipChanges';
 export { Language } from './models/Language';
+export type { ListIncompleteUploadsReq } from './models/ListIncompleteUploadsReq';
+export type { ListIncompleteUploadsResp } from './models/ListIncompleteUploadsResp';
+export type { ListPortfoliosReq } from './models/ListPortfoliosReq';
+export type { ListPortfoliosResp } from './models/ListPortfoliosResp';
 export type { NewPortfolioAsset } from './models/NewPortfolioAsset';
 export type { PactaVersion } from './models/PactaVersion';
 export type { PactaVersionChanges } from './models/PactaVersionChanges';
 export type { PactaVersionCreate } from './models/PactaVersionCreate';
 export type { ParsePortfolioReq } from './models/ParsePortfolioReq';
 export type { ParsePortfolioResp } from './models/ParsePortfolioResp';
+export type { Portfolio } from './models/Portfolio';
+export type { PortfolioChanges } from './models/PortfolioChanges';
+export type { StartPortfolioUploadReq } from './models/StartPortfolioUploadReq';
+export type { StartPortfolioUploadReqItem } from './models/StartPortfolioUploadReqItem';
+export type { StartPortfolioUploadResp } from './models/StartPortfolioUploadResp';
+export type { StartPortfolioUploadRespItem } from './models/StartPortfolioUploadRespItem';
 export { User } from './models/User';
 export { UserChanges } from './models/UserChanges';
 
diff --git a/frontend/openapi/generated/pacta/models/CompletePortfolioUploadReq.ts b/frontend/openapi/generated/pacta/models/CompletePortfolioUploadReq.ts
new file mode 100644
index 0000000..60236ff
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/CompletePortfolioUploadReq.ts
@@ -0,0 +1,14 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { CompletePortfolioUploadReqItem } from './CompletePortfolioUploadReqItem';
+
+export type CompletePortfolioUploadReq = {
+    /**
+     * The incomplete uploads that have been successfully uploaded to storage and are ready for parsing.
+     */
+    items: Array<CompletePortfolioUploadReqItem>;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/CompletePortfolioUploadReqItem.ts b/frontend/openapi/generated/pacta/models/CompletePortfolioUploadReqItem.ts
new file mode 100644
index 0000000..eef3190
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/CompletePortfolioUploadReqItem.ts
@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type CompletePortfolioUploadReqItem = {
+    /**
+     * The unique identifier for the uploaded asset
+     */
+    incomplete_upload_id: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/CompletePortfolioUploadResp.ts b/frontend/openapi/generated/pacta/models/CompletePortfolioUploadResp.ts
new file mode 100644
index 0000000..1dad40d
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/CompletePortfolioUploadResp.ts
@@ -0,0 +1,6 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type CompletePortfolioUploadResp = Record<string, any>;
diff --git a/frontend/openapi/generated/pacta/models/HoldingsDate.ts b/frontend/openapi/generated/pacta/models/HoldingsDate.ts
new file mode 100644
index 0000000..11c37ae
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/HoldingsDate.ts
@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type HoldingsDate = {
+    /**
+     * The time at which the holdings are represented at
+     */
+    time: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/IncompleteUpload.ts b/frontend/openapi/generated/pacta/models/IncompleteUpload.ts
new file mode 100644
index 0000000..ccb59d5
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/IncompleteUpload.ts
@@ -0,0 +1,47 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { HoldingsDate } from './HoldingsDate';
+
+export type IncompleteUpload = {
+    /**
+     * Unique identifier for the incomplete upload
+     */
+    id: string;
+    /**
+     * Name of the upload
+     */
+    name: string;
+    /**
+     * Description of the upload
+     */
+    description: string;
+    holdingsDate?: HoldingsDate;
+    /**
+     * The time when the upload was created
+     */
+    createdAt: string;
+    /**
+     * The time when the upload process was run
+     */
+    ranAt?: string;
+    /**
+     * The time when the upload was completed
+     */
+    completedAt?: string;
+    /**
+     * Code describing the failure, if any
+     */
+    failureCode?: string;
+    /**
+     * Message describing the failure, if any
+     */
+    failureMessage?: string;
+    /**
+     * Flag to indicate whether admin debug mode is enabled
+     */
+    adminDebugEnabled: boolean;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/IncompleteUploadChanges.ts b/frontend/openapi/generated/pacta/models/IncompleteUploadChanges.ts
new file mode 100644
index 0000000..1a7e3b5
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/IncompleteUploadChanges.ts
@@ -0,0 +1,20 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type IncompleteUploadChanges = {
+    /**
+     * Name of the upload
+     */
+    name?: string;
+    /**
+     * Description of the upload
+     */
+    description?: string;
+    /**
+     * Flag to indicate whether admin debug mode is enabled
+     */
+    adminDebugEnabled?: boolean;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/ListIncompleteUploadsReq.ts b/frontend/openapi/generated/pacta/models/ListIncompleteUploadsReq.ts
new file mode 100644
index 0000000..d24d6df
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/ListIncompleteUploadsReq.ts
@@ -0,0 +1,6 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type ListIncompleteUploadsReq = Record<string, any>;
diff --git a/frontend/openapi/generated/pacta/models/ListIncompleteUploadsResp.ts b/frontend/openapi/generated/pacta/models/ListIncompleteUploadsResp.ts
new file mode 100644
index 0000000..2616abd
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/ListIncompleteUploadsResp.ts
@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { IncompleteUpload } from './IncompleteUpload';
+
+export type ListIncompleteUploadsResp = {
+    items: Array<IncompleteUpload>;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/ListPortfoliosReq.ts b/frontend/openapi/generated/pacta/models/ListPortfoliosReq.ts
new file mode 100644
index 0000000..18bdc3a
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/ListPortfoliosReq.ts
@@ -0,0 +1,6 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type ListPortfoliosReq = Record<string, any>;
diff --git a/frontend/openapi/generated/pacta/models/ListPortfoliosResp.ts b/frontend/openapi/generated/pacta/models/ListPortfoliosResp.ts
new file mode 100644
index 0000000..07978b9
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/ListPortfoliosResp.ts
@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { Portfolio } from './Portfolio';
+
+export type ListPortfoliosResp = {
+    items: Array<Portfolio>;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/Portfolio.ts b/frontend/openapi/generated/pacta/models/Portfolio.ts
new file mode 100644
index 0000000..43c256d
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/Portfolio.ts
@@ -0,0 +1,35 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { HoldingsDate } from './HoldingsDate';
+
+export type Portfolio = {
+    /**
+     * the system assigned unique identifier of the portfolio
+     */
+    id: string;
+    /**
+     * the human meaningful name of the portfolio
+     */
+    name: string;
+    /**
+     * Additional information about the portfolio
+     */
+    description: string;
+    /**
+     * The time at which this portfolio was successfully parsed from a raw
+     */
+    createdAt: string;
+    holdingsDate?: HoldingsDate;
+    /**
+     * Whether the admin debug mode is enabled for this portfolio
+     */
+    adminDebugEnabled: boolean;
+    /**
+     * The number of rows in the portfolio
+     */
+    numberOfRows: number;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/PortfolioChanges.ts b/frontend/openapi/generated/pacta/models/PortfolioChanges.ts
new file mode 100644
index 0000000..5070f84
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioChanges.ts
@@ -0,0 +1,20 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type PortfolioChanges = {
+    /**
+     * the human meaningful name of the portfolio
+     */
+    name?: string;
+    /**
+     * Additional information about the portfolio
+     */
+    description?: string;
+    /**
+     * Whether the admin debug mode is enabled for this portfolio
+     */
+    adminDebugEnabled?: boolean;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/StartPortfolioUploadReq.ts b/frontend/openapi/generated/pacta/models/StartPortfolioUploadReq.ts
new file mode 100644
index 0000000..bc0feaf
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/StartPortfolioUploadReq.ts
@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { HoldingsDate } from './HoldingsDate';
+import type { StartPortfolioUploadReqItem } from './StartPortfolioUploadReqItem';
+
+export type StartPortfolioUploadReq = {
+    items: Array<StartPortfolioUploadReqItem>;
+    holdings_date: HoldingsDate;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/StartPortfolioUploadReqItem.ts b/frontend/openapi/generated/pacta/models/StartPortfolioUploadReqItem.ts
new file mode 100644
index 0000000..4f4c35e
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/StartPortfolioUploadReqItem.ts
@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type StartPortfolioUploadReqItem = {
+    /**
+     * The name of the file, including its extension.
+     */
+    file_name: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/StartPortfolioUploadResp.ts b/frontend/openapi/generated/pacta/models/StartPortfolioUploadResp.ts
new file mode 100644
index 0000000..064d782
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/StartPortfolioUploadResp.ts
@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { StartPortfolioUploadRespItem } from './StartPortfolioUploadRespItem';
+
+export type StartPortfolioUploadResp = {
+    items: Array<StartPortfolioUploadRespItem>;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/StartPortfolioUploadRespItem.ts b/frontend/openapi/generated/pacta/models/StartPortfolioUploadRespItem.ts
new file mode 100644
index 0000000..eef0fa2
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/StartPortfolioUploadRespItem.ts
@@ -0,0 +1,20 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type StartPortfolioUploadRespItem = {
+    /**
+     * The name of the file, including its extension, used as a round-trip id.
+     */
+    file_name: string;
+    /**
+     * The signed URL where the file should be uploaded to, using PUT semantics.
+     */
+    upload_url: string;
+    /**
+     * A unique identifier for the uploaded asset
+     */
+    incomplete_upload_id: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/services/DefaultService.ts b/frontend/openapi/generated/pacta/services/DefaultService.ts
index fe208c3..a692609 100644
--- a/frontend/openapi/generated/pacta/services/DefaultService.ts
+++ b/frontend/openapi/generated/pacta/services/DefaultService.ts
@@ -2,6 +2,10 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { CompletePortfolioUploadReq } from '../models/CompletePortfolioUploadReq';
+import type { CompletePortfolioUploadResp } from '../models/CompletePortfolioUploadResp';
+import type { IncompleteUpload } from '../models/IncompleteUpload';
+import type { IncompleteUploadChanges } from '../models/IncompleteUploadChanges';
 import type { Initiative } from '../models/Initiative';
 import type { InitiativeChanges } from '../models/InitiativeChanges';
 import type { InitiativeCreate } from '../models/InitiativeCreate';
@@ -9,12 +13,15 @@ import type { InitiativeInvitation } from '../models/InitiativeInvitation';
 import type { InitiativeInvitationCreate } from '../models/InitiativeInvitationCreate';
 import type { InitiativeUserRelationship } from '../models/InitiativeUserRelationship';
 import type { InitiativeUserRelationshipChanges } from '../models/InitiativeUserRelationshipChanges';
-import type { NewPortfolioAsset } from '../models/NewPortfolioAsset';
+import type { ListIncompleteUploadsResp } from '../models/ListIncompleteUploadsResp';
+import type { ListPortfoliosResp } from '../models/ListPortfoliosResp';
 import type { PactaVersion } from '../models/PactaVersion';
 import type { PactaVersionChanges } from '../models/PactaVersionChanges';
 import type { PactaVersionCreate } from '../models/PactaVersionCreate';
-import type { ParsePortfolioReq } from '../models/ParsePortfolioReq';
-import type { ParsePortfolioResp } from '../models/ParsePortfolioResp';
+import type { Portfolio } from '../models/Portfolio';
+import type { PortfolioChanges } from '../models/PortfolioChanges';
+import type { StartPortfolioUploadReq } from '../models/StartPortfolioUploadReq';
+import type { StartPortfolioUploadResp } from '../models/StartPortfolioUploadResp';
 import type { User } from '../models/User';
 import type { UserChanges } from '../models/UserChanges';
 
@@ -400,6 +407,152 @@ export class DefaultService {
         });
     }
 
+    /**
+     * Gets the incomplete uploads that the user is the owner of
+     * @returns ListIncompleteUploadsResp
+     * @throws ApiError
+     */
+    public listIncompleteUploads(): CancelablePromise<ListIncompleteUploadsResp> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/incomplete-uploads',
+        });
+    }
+
+    /**
+     * Returns an incomplete upload by ID
+     * Returns an incomplete upload based on a single ID
+     * @param id ID of incomplete upload to fetch
+     * @returns IncompleteUpload incomplete upload response
+     * @throws ApiError
+     */
+    public findIncompleteUploadById(
+        id: string,
+    ): CancelablePromise<IncompleteUpload> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/incomplete-upload/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
+
+    /**
+     * Updates incomplete upload properties
+     * Updates a incomplete upload's settable properties
+     * @param id ID of incomplete upload to update
+     * @param requestBody Incomplete Upload object properties to update
+     * @returns void
+     * @throws ApiError
+     */
+    public updateIncompleteUpload(
+        id: string,
+        requestBody: IncompleteUploadChanges,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'PATCH',
+            url: '/incomplete-upload/{id}',
+            path: {
+                'id': id,
+            },
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+
+    /**
+     * Deletes an incomplete upload by ID
+     * deletes an incomplete upload based on the ID supplied
+     * @param id ID of incomplete upload to delete
+     * @returns void
+     * @throws ApiError
+     */
+    public deleteIncompleteUpload(
+        id: string,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'DELETE',
+            url: '/incomplete-upload/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
+
+    /**
+     * Gets the list of portfolios that the user is the owner of
+     * @returns ListPortfoliosResp
+     * @throws ApiError
+     */
+    public listPortfolios(): CancelablePromise<ListPortfoliosResp> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/portfolios',
+        });
+    }
+
+    /**
+     * Returns an portfolio by ID
+     * Returns an portfolio based on a single ID
+     * @param id ID of portfolio to fetch
+     * @returns Portfolio portfolio response
+     * @throws ApiError
+     */
+    public findPortfolioById(
+        id: string,
+    ): CancelablePromise<Portfolio> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/portfolio/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
+
+    /**
+     * Updates portfolio properties
+     * Updates a portfolio's settable properties
+     * @param id ID of portfolio to update
+     * @param requestBody portfolio object properties to update
+     * @returns void
+     * @throws ApiError
+     */
+    public updatePortfolio(
+        id: string,
+        requestBody: PortfolioChanges,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'PATCH',
+            url: '/portfolio/{id}',
+            path: {
+                'id': id,
+            },
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+
+    /**
+     * Deletes an portfolio by ID
+     * deletes an portfolio based on the ID supplied
+     * @param id ID of portfolio to delete
+     * @returns void
+     * @throws ApiError
+     */
+    public deletePortfolio(
+        id: string,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'DELETE',
+            url: '/portfolio/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
+
     /**
      * gets info about the logged in user
      * Returns the logged in user, if the user is logged in, otherwise returns empty
@@ -488,35 +641,36 @@ export class DefaultService {
     }
 
     /**
-     * Test endpoint, creates a new portfolio asset
-     * Creates a new asset for a portfolio
-     *
-     * Returns a signed URL where the portfolio can be uploaded to.
-     *
-     * @returns NewPortfolioAsset The asset can now be uploaded via the given signed URL.
+     * Starts the process of uploading one or more portfolio files
+     * Creates one or more new incomplete portfolio uploads, and creates upload URLs for the user to put their blobs into.
+     * @param requestBody A request describing the portfolios that the user wants to upload
+     * @returns StartPortfolioUploadResp The assets can now be uploaded via the given signed URLs.
      * @throws ApiError
      */
-    public createPortfolioAsset(): CancelablePromise<NewPortfolioAsset> {
+    public startPortfolioUpload(
+        requestBody: StartPortfolioUploadReq,
+    ): CancelablePromise<StartPortfolioUploadResp> {
         return this.httpRequest.request({
             method: 'POST',
-            url: '/test:createPortfolioAsset',
+            url: '/portfolio-upload',
+            body: requestBody,
+            mediaType: 'application/json',
         });
     }
 
     /**
-     * Test endpoint, triggers a task to process the portfolio
-     * Starts processing raw uploaded files
-     *
-     * @param requestBody The raw portfolio files to process
-     * @returns ParsePortfolioResp The task has been started successfully
+     * Called after uploads of portfolios to cloud storage are complete.
+     * Signals that the upload of the portfolios are complete, and that the server should start parsing them.
+     * @param requestBody A request describing the incomplete uploads that the user wants to begin processing
+     * @returns CompletePortfolioUploadResp The process to initiate the parsing of the uploads has been initiated.
      * @throws ApiError
      */
-    public parsePortfolio(
-        requestBody: ParsePortfolioReq,
-    ): CancelablePromise<ParsePortfolioResp> {
+    public completePortfolioUpload(
+        requestBody: CompletePortfolioUploadReq,
+    ): CancelablePromise<CompletePortfolioUploadResp> {
         return this.httpRequest.request({
             method: 'POST',
-            url: '/test:parsePortfolio',
+            url: '/portfolio-upload:complete',
             body: requestBody,
             mediaType: 'application/json',
         });
diff --git a/frontend/pages/admin/portfolio_test.vue b/frontend/pages/admin/portfolio_test.vue
deleted file mode 100644
index 72176eb..0000000
--- a/frontend/pages/admin/portfolio_test.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { type NewPortfolioAsset } from '@/openapi/generated/pacta'
-import { type FileUploadUploaderEvent } from 'primevue/fileupload'
-
-const pactaClient = usePACTA()
-const { $axios } = useNuxtApp()
-
-interface Asset {
-  resp: NewPortfolioAsset
-  fileName: string
-}
-
-const uploadedAssets = useState<Asset[]>('Index.uploadedAssets', () => [])
-
-const uploadedAssetNames = computed(() => {
-  return uploadedAssets.value.map((npa) => npa.fileName.substring(npa.fileName.lastIndexOf('/') + 1))
-})
-
-const assetIDs = computed(() => {
-  return uploadedAssets.value.map((npa) => npa.resp.asset_id)
-})
-
-const startProcessing = async () => {
-  if (assetIDs.value?.length === 0) {
-    return
-  }
-  const resp = await pactaClient.parsePortfolio({ asset_ids: assetIDs.value })
-  alert(`TASK ID: ${resp.task_id}`)
-}
-
-const createPortfolioAsset = async (file: File) => {
-  const resp = await pactaClient.createPortfolioAsset()
-  void await $axios({
-    method: 'PUT',
-    url: resp.upload_url,
-    data: file,
-    headers: {
-      'Content-Type': file.type,
-      'x-ms-blob-type': 'BlockBlob',
-    },
-  })
-  uploadedAssets.value.push({ resp, fileName: file.name })
-}
-
-const onUpload = async (e: FileUploadUploaderEvent) => {
-  if (!e.files || e.files.length === 0) {
-    return
-  }
-  const files = Array.isArray(e.files) ? e.files : [e.files]
-  for (const file of files) {
-    await createPortfolioAsset(file)
-  }
-}
-</script>
-
-<template>
-  <div>
-    <div class="flex gap-3 m-2 justify-content-center">
-      <PVFileUpload
-        mode="basic"
-        :auto="true"
-        :multiple="true"
-        custom-upload
-        choose-label="Upload Portfolio(s)"
-        @uploader="onUpload"
-      />
-
-      <PVButton
-        label="Send Portfolio(s) for Processing"
-        icon="pi pi-send"
-        :disable="uploadedAssets.length == 0"
-        @click="startProcessing"
-      />
-    </div>
-
-    <template v-if="uploadedAssetNames.length > 0">
-      <hr>
-      <ul>
-        <li
-          v-for="asset in uploadedAssetNames"
-          :key="asset"
-        >
-          {{ asset }}
-        </li>
-      </ul>
-    </template>
-  </div>
-</template>
diff --git a/frontend/pages/incomplete-uploads.vue b/frontend/pages/incomplete-uploads.vue
new file mode 100644
index 0000000..8335942
--- /dev/null
+++ b/frontend/pages/incomplete-uploads.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { incompleteUploadEditor } from '@/lib/editor'
+
+const { humanReadableTimeFromStandardString } = useTime()
+const pactaClient = usePACTA()
+const { loading: { withLoading } } = useModal()
+
+const prefix = 'pages/portfolios'
+const expandedRows = useState(`${prefix}.expandedRows`, () => [])
+
+const [
+  { data },
+] = await Promise.all([
+  useSimpleAsyncData(`${prefix}.incompleteUploads`, () => pactaClient.listIncompleteUploads()),
+])
+
+let editorObjects = data.value.items.map((item) => ({ ...incompleteUploadEditor(item), id: item.id }))
+
+const deleteIncompleteUpload = (id: string) => withLoading(
+  () => pactaClient.deleteIncompleteUpload(id).then(() => {
+    editorObjects = editorObjects.filter((editorObject) => editorObject.id !== id)
+  }),
+  `${prefix}.deleteIncompleteUpload`,
+)
+const saveChanges = (id: string) => {
+  const index = editorObjects.findIndex((editorObject) => editorObject.id === id)
+  const eo = presentOrFileBug(editorObjects[index])
+  return withLoading(
+    () => pactaClient.updateIncompleteUpload(id, eo.changes.value)
+      .then(() => pactaClient.findIncompleteUploadById(id))
+      .then((incompleteUpload) => {
+        editorObjects[index] = { ...incompleteUploadEditor(incompleteUpload), id }
+      }),
+    `${prefix}.saveChanges`,
+  )
+}
+const deleteAll = () => withLoading(
+  async () => {
+    for (const id of editorObjects.map(eo => eo.id)) {
+      await deleteIncompleteUpload(id)
+    }
+    editorObjects = []
+  },
+  `${prefix}.deleteAll`,
+)
+</script>
+
+<template>
+  <StandardContent>
+    <TitleBar title="Incomplete Uploads" />
+    <p>
+      This page shows uploads that haven't been parsed successfully. This typically happens
+      because they are missing required fields, have invalid values, or are otherwise not
+      recognized by the system.
+    </p>
+    <p>
+      In the row-expansion for each upload, you can see the status, failure reason (if any),
+      and change properties of the file like name and description, which can be helpful for
+      recordkeeping.
+    </p>
+    <p>
+      If you want to fully abandon the upload, just delete it, and the data will be removed from
+      our systems. If you'd instead like an admin to take a look at the failure to help you diagnose
+      the issue, you can enable the "Admin Debugging" option, and file a support ticket.
+    </p>
+    <PVDataTable
+      v-model:expanded-rows="expandedRows"
+      size="small"
+      :value="editorObjects"
+      data-key="id"
+      class="incomplete-upload-table"
+    >
+      <PVColumn
+        field="editorObject.value.createdAt.originalValue"
+        header="Created At"
+        sortable
+      >
+        <template #body="slotProps">
+          {{ humanReadableTimeFromStandardString(slotProps.data.editorObject.value.createdAt.originalValue).value }}
+        </template>
+      </PVColumn>
+      <PVColumn
+        field="editorObject.value.name.originalValue"
+        sortable
+        header="Name"
+      />
+      <PVColumn
+        expander
+        header="Details"
+      />
+      <template
+        #expansion="slotProps"
+      >
+        <div class="surface-100 p-3">
+          <h2 class="mt-0">
+            Metadata
+          </h2>
+          <div class="flex flex-column gap-2 w-fit">
+            <div class="flex gap-2 justify-content-between">
+              <span>Created At</span>
+              <b>{{ humanReadableTimeFromStandardString(slotProps.data.editorObject.value.createdAt.originalValue).value }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>Ran At</span>
+              <b>{{ slotProps.data.editorObject.value.ranAt.originalValue ? humanReadableTimeFromStandardString(slotProps.data.editorObject.value.ranAt.originalValue).value : 'N/A' }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>Completed At</span>
+              <b>{{ slotProps.data.editorObject.value.completedAt.originalValue ? humanReadableTimeFromStandardString(slotProps.data.editorObject.value.completedAt.originalValue).value : 'N/A' }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>Failure Code</span>
+              <b>{{ slotProps.data.editorObject.value.failureCode.originalValue ?? 'N/A' }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>Failure Message</span>
+              <b>{{ slotProps.data.editorObject.value.failureMessage.originalValue ?? 'N/A' }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>ID</span>
+              <b>{{ slotProps.data.id }}</b>
+            </div>
+          </div>
+          <h2 class="mt-5">
+            Editable Properties
+          </h2>
+          <IncompleteuploadEditor v-model:editor-incomplete-upload="slotProps.data.editorObject.value" />
+          <div class="flex gap-3 justify-content-between">
+            <PVButton
+              icon="pi pi-trash"
+              class="p-button-danger p-button-outlined"
+              label="Delete"
+              @click="() => deleteIncompleteUpload(slotProps.data.id)"
+            />
+            <div v-tooltip.bottom="slotProps.data.saveTooltip">
+              <PVButton
+                :disabled="!slotProps.data.canSave.value"
+                label="Save Changes"
+                icon="pi pi-save"
+                icon-pos="right"
+                @click="() => saveChanges(slotProps.data.id)"
+              />
+            </div>
+          </div>
+          <StandardDebug
+            :value="slotProps.data.editorObject.value"
+            label="Incomplete Upload"
+          />
+        </div>
+      </template>
+    </PVDataTable>
+    <PVButton
+      v-if="editorObjects.length > 0"
+      label="Delete All Incomplete Uploads"
+      icon="pi pi-trash"
+      class="p-button-danger p-button-outlined"
+      @click="deleteAll"
+    />
+    <StandardDebug
+      :value="data"
+      label="Editor Objects"
+    />
+  </standardcontent>
+</template>
+
+<style lang="scss">
+.incomplete-upload-table.p-datatable {
+  width: 100%;
+
+  .p-datatable-row-expansion td {
+    padding: 0;
+  }
+}
+</style>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index a0c6b3e..8f1861d 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -17,14 +17,24 @@ const { signIn } = useSignIn()
     <PVButton
       v-if="!isAuthenticated"
       label="Sign In"
+      icon="pi pi-sign-in"
+      icon-pos="right"
       @click="signIn"
     />
-    <PVButton
-      v-else
-      class="inline-block"
-      label="Sign Out"
-      icon="pi pi-sign-out"
-      @click="signOut"
-    />
+    <template v-else>
+      <LinkButton
+        label="Get Started"
+        icon="pi pi-arrow-right"
+        icon-pos="right"
+        to="/upload"
+      />
+      <PVButton
+        class="p-button-outlined"
+        label="Sign Out"
+        icon="pi pi-sign-out"
+        icon-pos="right"
+        @click="signOut"
+      />
+    </template>
   </StandardContent>
 </template>
diff --git a/frontend/pages/portfolios.vue b/frontend/pages/portfolios.vue
new file mode 100644
index 0000000..2449ddd
--- /dev/null
+++ b/frontend/pages/portfolios.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { portfolioEditor } from '@/lib/editor'
+
+const {
+  humanReadableTimeFromStandardString,
+  humanReadableDateFromStandardString,
+} = useTime()
+const pactaClient = usePACTA()
+const { loading: { withLoading } } = useModal()
+
+interface EditorObject extends ReturnType<typeof portfolioEditor> {
+  id: string
+}
+
+const prefix = 'pages/portfolios'
+const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
+const selectedRows = useState<EditorObject[]>(`${prefix}.selectedRows`, () => [])
+
+const [
+  { data },
+] = await Promise.all([
+  useSimpleAsyncData(`${prefix}.portfolios`, () => pactaClient.listPortfolios()),
+])
+
+let editorObjects = data.value.items.map((item) => ({ ...portfolioEditor(item), id: item.id }))
+
+const deletePortfolio = (id: string) => withLoading(
+  () => pactaClient.deletePortfolio(id).then(() => {
+    editorObjects = editorObjects.filter((editorObject) => editorObject.id !== id)
+    expandedRows.value = expandedRows.value.filter((row) => row.id !== id)
+  }),
+  `${prefix}.deletePortfolio`,
+)
+const saveChanges = (id: string) => {
+  const index = editorObjects.findIndex((editorObject) => editorObject.id === id)
+  const eo = presentOrFileBug(editorObjects[index])
+  return withLoading(
+    () => pactaClient.updatePortfolio(id, eo.changes.value)
+      .then(() => pactaClient.findPortfolioById(id))
+      .then((portfolio) => {
+        editorObjects[index] = { ...portfolioEditor(portfolio), id }
+      }),
+    `${prefix}.saveChanges`,
+  )
+}
+</script>
+
+<template>
+  <StandardContent>
+    <TitleBar title="Portfolios" />
+    <p>
+      This page shows your logical portfolios.
+    </p>
+    <PVDataTable
+      v-model:selection="selectedRows"
+      v-model:expanded-rows="expandedRows"
+      :value="editorObjects"
+      data-key="id"
+      class="portfolio-upload-table"
+      size="small"
+    >
+      <PVColumn selection-mode="multiple" />
+      <PVColumn
+        field="editorObject.value.createdAt.originalValue"
+        header="Created At"
+        sortable
+      >
+        <template #body="slotProps">
+          {{ humanReadableTimeFromStandardString(slotProps.data.editorObject.value.createdAt.originalValue).value }}
+        </template>
+      </PVColumn>
+      <PVColumn
+        field="editorObject.value.name.originalValue"
+        sortable
+        header="Name"
+      />
+      <PVColumn
+        expander
+        header="Details"
+      />
+      <template
+        #expansion="slotProps"
+      >
+        <div class="surface-100 p-3">
+          <h2 class="mt-0">
+            Metadata
+          </h2>
+          <div class="flex flex-column gap-2 w-fit">
+            <div class="flex gap-2 justify-content-between">
+              <span>Created At</span>
+              <b>{{ humanReadableTimeFromStandardString(slotProps.data.editorObject.value.createdAt.originalValue).value }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>Number of Rows</span>
+              <b>{{ slotProps.data.editorObject.value.numberOfRows.originalValue }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>Holdings Date</span>
+              <b>{{ humanReadableDateFromStandardString(slotProps.data.editorObject.value.holdingsDate.originalValue.time).value }}</b>
+            </div>
+          </div>
+          <h2 class="mt-5">
+            Editable Properties
+          </h2>
+          <PortfolioEditor v-model:editor-portfolio="slotProps.data.editorObject.value" />
+          <div class="flex gap-3 justify-content-between">
+            <PVButton
+              icon="pi pi-trash"
+              class="p-button-danger p-button-outlined"
+              label="Delete"
+              @click="() => deletePortfolio(slotProps.data.id)"
+            />
+            <div v-tooltip.bottom="slotProps.data.saveTooltip">
+              <PVButton
+                :disabled="!slotProps.data.canSave.value"
+                label="Save Changes"
+                icon="pi pi-save"
+                icon-pos="right"
+                @click="() => saveChanges(slotProps.data.id)"
+              />
+            </div>
+          </div>
+          <StandardDebug
+            :value="slotProps.data.editorObject.value"
+            label="Portfolio Upload"
+          />
+        </div>
+      </template>
+    </PVDataTable>
+    <div class="flex flex-wrap gap-3 w-full justify-content-between">
+      <LinkButton
+        class="p-button-outlined"
+        icon="pi pi-arrow-left"
+        to="/upload"
+        label="Upload New Portfolios"
+      />
+      <PVButton
+        class="p-button-outlined"
+        label="How To Run a Report"
+        icon="pi pi-question-circle"
+        icon-pos="right"
+      />
+    </div>
+    <StandardDebug
+      :value="data"
+      label="Editor Objects"
+    />
+  </standardcontent>
+</template>
+
+<style lang="scss">
+.portfolio-upload-table.p-datatable.p-datatable-sm {
+  width: 100%;
+
+  .p-datatable-row-expansion td {
+    padding: 0 0.5rem;
+
+  }
+
+  .p-checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+
+    .p-checkbox-box {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/frontend/pages/upload.vue b/frontend/pages/upload.vue
new file mode 100644
index 0000000..5e303f3
--- /dev/null
+++ b/frontend/pages/upload.vue
@@ -0,0 +1,407 @@
+<script setup lang="ts">
+import { type FileUploadUploaderEvent } from 'primevue/fileupload'
+import { serializeError } from 'serialize-error'
+import { formatFileSize } from '@/lib/filesize'
+
+const pactaClient = usePACTA()
+const { $axios } = useNuxtApp()
+const { t } = useI18n()
+
+const prefix = 'Upload'
+const tt = (key: string) => t(`${prefix}.${key}`)
+
+enum FileStatus {
+  Selected = 'Selected',
+  Waiting = 'Waiting',
+  Uploading = 'Uploading',
+  Uploaded = 'Uploaded',
+  Validating = 'Validating',
+  CleanUp = 'Cleaning Up',
+  Done = 'Done',
+  Error = 'Error',
+}
+
+interface FileState {
+  file: File
+  status: FileStatus
+  shortName: string
+  incompleteUploadId?: string
+  errorMessage?: string
+}
+
+interface FileStateDetail extends FileState {
+  index: number
+  icon: string
+  sizeStr: string
+  key: string
+  effectiveError?: string | undefined
+}
+
+const holdingsDate = useState<Date>(`${prefix}.holdingsDate`, () => new Date())
+const errorCode = useState<string>(`${prefix}.errorCode`, () => '')
+const errorMessage = useState<string>(`${prefix}.errorMessage`, () => '')
+const startedProcessing = useState<boolean>(`${prefix}.startedProcessing`, () => false)
+const isProcessing = useState<boolean>(`${prefix}.isProcessing`, () => false)
+const fileStates = useState<FileState[]>(`${prefix}.fileState`, () => [])
+
+const reset = () => {
+  holdingsDate.value = new Date()
+  errorCode.value = ''
+  errorMessage.value = ''
+  startedProcessing.value = false
+  isProcessing.value = false
+  fileStates.value = []
+}
+
+const removeFile = (index: number) => {
+  fileStates.value.splice(index, 1)
+}
+const hasAnyState = (status: FileStatus): boolean => {
+  return fileStates.value.some((fileState) => fileState.status === status)
+}
+const hasAllState = (status: FileStatus): boolean => {
+  return fileStates.value.every((fileState) => fileState.status === status)
+}
+const setAllStates = (status: FileStatus) => {
+  fileStates.value.forEach((fileState) => {
+    fileState.status = status
+  })
+}
+
+const fileStatesWithDetail = computed<FileStateDetail[]>(() => {
+  const dupeKey = (fileState: FileState) => `${fileState.file.name}-${fileState.file.size}`
+  const fileNameAndSizeCounts = fileStates.value.reduce((acc, fileState) => {
+    const key = dupeKey(fileState)
+    acc.set(key, (acc.get(key) ?? 0) + 1)
+    return acc
+  }, new Map<string, number>())
+  const isDuplicate = (fileState: FileState) => (fileNameAndSizeCounts.get(dupeKey(fileState)) ?? 0) > 1
+  return fileStates.value.map((fileState, index) => {
+    let icon = 'pi pi-spinner pi-spin'
+    if (fileState.status === FileStatus.Done) {
+      icon = 'pi pi-check-circle text-success'
+    } else if (fileState.status === FileStatus.Error) {
+      icon = 'pi pi-times text-error'
+    } else if (fileState.status === FileStatus.Selected) {
+      icon = 'pi pi-circle'
+    }
+    let otherError: string | undefined
+    // TODO(grady) validate this server side too.
+    if (fileState.file.name.length > 1000) {
+      otherError = 'Filename is too long (1000 characters max).'
+    } else if (fileState.file.size > 1028 * 1028 * 100) {
+      otherError = 'File is too large (100MB max).'
+    } else if (!fileState.file.name.endsWith('.csv')) {
+      otherError = 'File must be a csv file.'
+    } else if (isDuplicate(fileState)) {
+      otherError = 'This file may be a duplicate, consider removing it.'
+    }
+    return {
+      ...fileState,
+      index,
+      icon,
+      sizeStr: formatFileSize(fileState.file.size),
+      statusStr: tt(fileState.status),
+      key: `${fileState.file.name}-${index}`,
+      effectiveError: fileState.errorMessage ?? otherError,
+    }
+  })
+})
+const fileUploaderProps = computed(() => ({
+  disabled: isProcessing.value || allDone.value,
+  mode: 'basic',
+  auto: true,
+  multiple: true,
+  'custom-upload': true,
+  'choose-label': 'Add File(s)',
+}))
+const actionButtonLabel = computed(() => {
+  if (hasAnyState(FileStatus.Waiting)) {
+    return 'Waiting...'
+  }
+  if (hasAnyState(FileStatus.Uploading)) {
+    return 'Uploading...'
+  }
+  if (hasAnyState(FileStatus.Validating)) {
+    return 'Validating...'
+  }
+  if (hasAnyState(FileStatus.CleanUp)) {
+    return 'Cleaning Up...'
+  }
+  return 'Begin Upload'
+})
+const allDone = computed(() => hasAllState(FileStatus.Done) && fileStates.value.length > 0)
+
+const onSelect = (e: FileUploadUploaderEvent) => {
+  if (!e.files || e.files.length === 0) {
+    return
+  }
+  const fs = Array.isArray(e.files) ? e.files : [e.files]
+  fileStates.value.push(...fs.map((file) => ({
+    file,
+    fileName: file.name,
+    shortName: file.name.substring(file.name.lastIndexOf('/') + 1),
+    size: file.size,
+    status: FileStatus.Selected,
+  })))
+  setAllStates(FileStatus.Selected)
+}
+
+const startUpload = async () => {
+  errorCode.value = ''
+  errorMessage.value = ''
+  isProcessing.value = true
+  startedProcessing.value = true
+  setAllStates(FileStatus.Waiting)
+  const startPortfolioUploadResp = await pactaClient.startPortfolioUpload({
+    items: fileStates.value.map((fileState: FileState) => ({
+      file_name: fileState.file.name,
+      // TODO(grady) consider adding file size here as a validation step.
+      // TODO(grady) consider adding file type validation here.
+      // TODO(grady) consider adding duplicate file checking here.
+    })),
+    holdings_date: {
+      time: holdingsDate.value.toISOString(),
+    },
+  }).catch(e => {
+    console.log('error starting upload', e, e.body)
+    if (e.body?.error_id) {
+      errorCode.value = e.body.error_id
+    } else {
+      errorCode.value = 'Unknown Error'
+    }
+    if (e.body?.message) {
+      errorMessage.value = e.body.message
+    } else {
+      errorMessage.value = 'An unexpected error occurred - please file a bug to help us fix it.'
+    }
+    setAllStates(FileStatus.Selected)
+  })
+  if (!startPortfolioUploadResp) {
+    isProcessing.value = false
+    return
+  }
+
+  setAllStates(FileStatus.Uploading)
+  const uploads = fileStatesWithDetail.value.map(async (fileState: FileStateDetail): Promise<void> => {
+    const { file, index } = fileState
+    const respItem = startPortfolioUploadResp.items.find((item) => item.file_name === file.name)
+    if (!respItem) {
+      throw new Error(`Could not find start item for file ${file.name} - something is probably wrong in the API bizlogic`)
+    }
+    fileStates.value[index].incompleteUploadId = respItem.incomplete_upload_id
+
+    await $axios({
+      method: 'PUT',
+      url: respItem.upload_url,
+      data: file,
+      headers: {
+        'Content-Type': file.type,
+        'x-ms-blob-type': 'BlockBlob',
+      },
+    }).then(() => {
+      fileStates.value[index].status = FileStatus.Uploaded
+    }).catch((e) => {
+      console.log('error uploading file', e)
+      fileStates.value[index].status = FileStatus.Error
+      fileStates.value[index].errorMessage = serializeError(e)
+      errorCode.value = 'Upload Failed'
+      errorMessage.value = 'One or more files could not be uploaded - please delete/resolve them and try again.'
+    })
+  })
+  await Promise.all(uploads)
+
+  let hadError = false
+  for (const fileState of fileStates.value) {
+    if (fileState.status === FileStatus.Uploaded) {
+      continue
+    } else if (fileState.status === FileStatus.Error) {
+      hadError = true
+    } else {
+      throw new Error(`Unexpected file state ${fileState.status}`)
+    }
+  }
+  if (!hadError) {
+    await doParsing()
+  }
+  isProcessing.value = false
+}
+
+const doParsing = async () => {
+  fileStates.value.forEach((_, i) => {
+    fileStates.value[i].status = FileStatus.Validating
+  })
+  await pactaClient.completePortfolioUpload({
+    items: fileStates.value.map((fileState) => ({
+      incomplete_upload_id: presentOrFileBug(fileState.incompleteUploadId),
+    })),
+  })
+  await waitForValidationToCompleteOrTimeout()
+  await cleanUpIncompleteUploads()
+}
+
+const waitForValidationToCompleteOrTimeout = async () => {
+  const timeout = 1000 * 60 * 5
+  const start = Date.now()
+  do {
+    await refreshStateFromIncompleteUploads()
+    if (Date.now() - start > timeout) {
+      throw new Error('Timeout waiting for uploads to complete')
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  } while (fileStates.value.some((fileState) => fileState.status === FileStatus.Validating))
+  isProcessing.value = false
+}
+
+const refreshStateFromIncompleteUploads = async () => {
+  const resp = await pactaClient.listIncompleteUploads()
+  console.log('resp', resp)
+  const incompleteUploads = resp.items
+  for (const incompleteUpload of incompleteUploads) {
+    const idx = fileStates.value.findIndex((fileState) => fileState.incompleteUploadId === incompleteUpload.id)
+    // Note - this item might not be in the list if the user hasn't cleaned up prior incomplete portfolios.
+    if (idx >= 0) {
+      if (incompleteUpload.failureCode) {
+        fileStates.value[idx].status = FileStatus.Error
+        fileStates.value[idx].errorMessage = incompleteUpload.failureMessage
+      } else if (incompleteUpload.completedAt) {
+        fileStates.value[idx].status = FileStatus.CleanUp
+      }
+    }
+  }
+}
+
+const cleanUpIncompleteUploads = async () => {
+  const fss = fileStates.value
+  for (let i = 0; i < fss.length; i++) {
+    const id = fss[i].incompleteUploadId
+    if (id) {
+      await pactaClient.deleteIncompleteUpload(id)
+      fileStates.value[i].status = FileStatus.Done
+    }
+  }
+}
+</script>
+
+<template>
+  <StandardContent>
+    <TitleBar title="Upload Portfolios" />
+    <p>
+      This is a page where you can upload portfolios to test out the PACTA platform.
+      This Copy will need work, and will need to link to the documentation.
+    </p>
+    <FormField
+      label="Holdings Date"
+      help-text="The holdings date for the portfolios that will be uploaded"
+    >
+      <PVCalendar
+        v-model="holdingsDate"
+        view="month"
+        date-format="mm/yy"
+        :disabled="startedProcessing"
+      />
+    </FormField>
+    <FormField
+      label="Portfolio Files"
+      class="w-full mb-0"
+      help-text="This should include a link to documentation etc."
+    >
+      <PVFileUpload
+        v-show="fileStatesWithDetail.length === 0"
+        v-bind="fileUploaderProps"
+        @uploader="onSelect"
+      />
+      <PVDataTable
+        v-show="fileStatesWithDetail.length > 0"
+        :value="fileStatesWithDetail"
+        class="w-full"
+        data-key="key"
+      >
+        <PVColumn>
+          <template #header>
+            <PVFileUpload
+              v-bind="fileUploaderProps"
+              @uploader="onSelect"
+            />
+          </template>
+          <template #body="slotProps">
+            <div class="flex gap-2 flex-wrap justify-content-between align-items-center">
+              <div class="flex flex-column gap-2">
+                <div class="font-bold">
+                  {{ slotProps.data.shortName }}
+                </div>
+                <div class="flex gap-2 align-items-center">
+                  <div>({{ slotProps.data.sizeStr }})</div>
+                  <PVButton
+                    class="p-button-danger p-button-text px-1 py-0 w-auto"
+                    icon="pi pi-trash"
+                    :disabled="isProcessing"
+                    @click="() => removeFile(slotProps.data.index)"
+                  />
+                </div>
+              </div>
+              <PVMessage
+                v-if="slotProps.data.effectiveError"
+                severity="warn"
+                :closable="false"
+              >
+                {{ slotProps.data.effectiveError }}
+              </PVMessage>
+              <div class="flex gap-2 align-items-center">
+                <div><i :class="slotProps.data.icon" /></div>
+                <div>{{ slotProps.data.status }}</div>
+              </div>
+            </div>
+          </template>
+        </PVColumn>
+      </PVDataTable>
+      <StandardDebug
+        :value="fileStatesWithDetail"
+        label="File States"
+      />
+    </FormField>
+    <PVMessage
+      v-show="!!errorCode"
+      severity="error"
+      class="m-0"
+      :closable="false"
+    >
+      <div class="flex flex-column gap-2">
+        <b>{{ errorCode }}</b>
+        <div>{{ errorMessage }}</div>
+      </div>
+    </PVMessage>
+    <PVButton
+      v-if="!allDone"
+      :label="actionButtonLabel"
+      :loading="isProcessing"
+      :disabled="isProcessing || fileStatesWithDetail.length === 0"
+      icon="pi pi-arrow-right"
+      icon-pos="right"
+      @click="startUpload"
+    />
+    <template v-else>
+      <PVMessage
+        severity="success"
+        class="m-0"
+        :closable="false"
+      >
+        Files have been uploaded, parsed, and translated to portfolios successfully.
+      </PVMessage>
+      <div class="flex gap-3">
+        <PVButton
+          label="Upload More"
+          class="p-button-outlined"
+          icon="pi pi-sync"
+          @click="reset"
+        />
+        <LinkButton
+          label="See Uploaded Portfolios"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          to="/portfolios"
+        />
+      </div>
+    </template>
+  </standardcontent>
+</template>
diff --git a/frontend/plugins/primevue.ts b/frontend/plugins/primevue.ts
index 9c31e02..052f7b1 100644
--- a/frontend/plugins/primevue.ts
+++ b/frontend/plugins/primevue.ts
@@ -5,6 +5,7 @@ import PrimeVue from 'primevue/config'
 import Accordion from 'primevue/accordion'
 import AccordionTab from 'primevue/accordiontab'
 import Button from 'primevue/button'
+import Calendar from 'primevue/calendar'
 import Card from 'primevue/card'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
@@ -30,6 +31,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
   vueApp.component('PVAccordion', Accordion)
   vueApp.component('PVAccordionTab', AccordionTab)
   vueApp.component('PVButton', Button)
+  vueApp.component('PVCalendar', Calendar)
   vueApp.component('PVCard', Card)
   vueApp.component('PVColumn', Column)
   vueApp.component('PVDataTable', DataTable)