Profile Should Allow for Upload of Files

[gregv]

Add Resume and Receipt Upload to Profile Page

Overview

Update the profile page to allow users to upload their PDF resume and receipts for hackathon reimbursement, utilizing our existing Google Cloud Storage infrastructure.

Requirements

• Add file upload fields for resume (PDF only) and receipts (PDF/JPG/PNG)
• Implement client-side file validation
• Update backend API to handle file uploads
• Store uploaded files in existing Google Cloud Storage bucket
• Display uploaded file names and allow deletion

Frontend Tasks

• Add file input fields to Profile.js component
• Implement handleFileUpload function using FormData
• Add file type/size validation
• Display uploaded file names
• Add delete functionality for uploaded files
• Update profile form submission to include file data

UI Mockup

• Users can upload 1 resume PDF and multiple receipt files
• Uploaded files are stored securely in GCS and linked to user profile
• Users can view and delete uploaded files
• Invalid file types/sizes are rejected with error message
• Files are stored in appropriate GCS folders based on user ID and file type by calling backend

Backend Tasks

• Update view/service files to handle multipart form data
• Implement file upload logic (validate, sanitize filenames, etc)
• Use Google Cloud Storage client library to store files in existing bucket
• Update profile model to store file metadata and GCS object names
• Implement file deletion API endpoint that removes file from GCS

Backend API Changes

POST /api/profile

• Accept multipart/form-data
• New fields: resume, receipts[]

DELETE /api/profile/files/{fileId}

• Delete specific uploaded file from GCS and database

Google Cloud Storage Integration

• Use existing GCS bucket: ohack-user-uploads (or specify actual bucket name)
• Store files in user-specific folders: {user_id}/resume/ and {user_id}/receipts/
• Generate signed URLs for secure file access

[abhinavpy-asu]

If this hasn't been completed yet and is still required to be completed, I am willing to take this up.

[abhinavpy-asu]

Phase 1: Backend Implementation (The Foundation)

The first step is to build the backend infrastructure to securely handle file uploads, interact with Google Cloud Storage (GCS), and update the user's profile in Firestore.

1. Update the User Data Model: We need to decide where to store the file information. We'll add new fields to the user's document in Firestore.

File to Modify: model/user.py

• Action: Add new attributes to the User class to hold GCS object paths.
• resume_gcs_path: str (to store the path like {user_id}/resume/my_resume.pdf)
• receipts: List[Dict] (a list of dictionaries, where each dict is {'filename': 'receipt1.png', 'gcs_path': '...', 'uploaded_at': '...'})

2. Create a Google Cloud Storage (GCS) Utility: The [hearts_service.py] file has a function [upload_to_cdn]. We should generalize this into a reusable utility for all GCS uploads.

File to Create: [common/utils/gcs.py]
Action:

• Create a new utility file for GCS interactions.
• Implement a generic upload_file function that takes a file object, bucket name, and destination path.
• Implement a delete_file function that takes a bucket name and object path.
• Implement a generate_signed_url function for secure, temporary access if needed in the future.

3. Create a New Profile Service: This service will contain all the business logic for updating a user's profile, including handling the file uploads.

File to Create: services/profile_service.py

Action:

• Create a update_user_profile function.
• This function will handle both regular profile data and file uploads.
• It will call the GCS utility to upload the resume and receipts to the specified paths ({user_id}/resume/ and {user_id}/receipts/).
• It will sanitize filenames to prevent security issues.
• After a successful upload, it will call the database layer to update the user's document with the new GCS paths.
• Create a delete_profile_file function that will take a [user_id] and a gcs_path, call the GCS utility to delete the file, and then update the user's document in Firestore to remove the file's metadata.

4. Create New Profile API Endpoints: We'll create a new blueprint for profile-related actions to keep our API routes clean.

File to Create: [api/profile/profile_views.py]
Action:

• Create a new Flask Blueprint.
• POST /api/profile: This endpoint will handle profile updates. It must be configured to accept [multipart/form-data]. It will extract the user's ID from the auth token, pull files and other form data from the request, and pass them to the profile_service.update_user_profile function.
• DELETE /api/profile/file: This endpoint will handle file deletion. It will expect a JSON body with the gcs_path of the file to be deleted. It will call the profile_service.delete_profile_file function.

File to Modify: [init.py]
Action: Register the new profile blueprint so the application recognizes the new routes.

Phase 2: Frontend Implementation (The User Interface)

With the backend ready, we can build the user-facing components for file management.

1. Create a New File Upload Component: A dedicated component will manage the UI for uploading, displaying, and deleting files.

• File to Create: frontend-ohack.dev/src/components/MyProfile/FileUploads.js

Action:

• Create a new React component that accepts the user's current resume and receipt data as props.
• Add two elements:
• One for the resume, accepting only .pdf.
• One for receipts, accepting .pdf, .jpg, .png and the multiple attribute.
• Implement client-side validation for file type and size.
• Display the list of already uploaded files with a "Delete" button next to each one.
• Show loading indicators during upload/deletion.

2. Update the Main Profile Page: Integrate the new FileUploads component into the existing profile page.

File to Modify: [MyProfile.js]
Action:

• Import the new FileUploads component.
• Render it within the profile page layout, likely inside a [StyledPaper] component.
• Pass the user's profile data (containing resume_gcs_path and receipts) to it as props.

3. Update the Profile API Hook: Centralize the new API calls within the existing hook for managing profile data.

File to Modify: [use-profile-api.js]
Action:

• Create a new uploadProfileFiles function. This function will take the files, construct a FormData object, and make a POST request to /api/profile.
• Create a new deleteProfileFile function that makes a DELETE request to /api/profile/file.
• Ensure these functions handle token-based authentication, just like the existing API calls.
• This phased approach ensures that we build the necessary backend capabilities before creating the frontend UI that depends on them, leading to a smoother development process. I will hold this plan in memory and am ready to proceed when you are.