[BLOG] Untitled Post Update upload API integration VS Code whhat are the update ont he upload api broo tell me the

untitled-post.md

title	Untitled Post
date	2026-06-01
excerpt	Update upload API integration VS Code whhat are the update ont he upload api broo tell me the
tags	blog quick-post
privacy	public

Update upload API integration

VS Code

whhat are the update ont he upload api broo tell me there are some updates tell me and tell me hiw to intrigate it to the frontend 3:33 PM

Worked for 5m 42s What Changed

On June 1, 2026, commit 1b3a85e added a new resumable upload flow on top of the old one-shot upload API.

Old API still exists: POST /api/files/upload with FormData field file for simple uploads. See upload route (line 15). New API is chunked/resumable: POST /api/files/upload-sessions to create a session. See session create route (line 36). PUT /api/files/upload-sessions/{uploadId}/chunks to send raw bytes with Content-Range. See chunk route (line 20). GET /api/files/upload-sessions/{uploadId} to poll status/progress. See session read route (line 20). The backend now stores upload session state in user_graph_upload_sessions and final files in user_graph_files. See schema (line 698). Default chunk size is 5242880 bytes (5 MB), configurable via GRAPH_UPLOAD_CHUNK_BYTES, and rounded to Graph’s 320 KB granularity. Max file is 25 MB by default. See constants (line 40). Chunks must be sent sequentially, not in parallel. The service rejects out-of-order chunks. See upload session service (line 387). Responses now include session, quota, and chunkSizeBytes, and once complete they also include file. See doc (line 5). How To Integrate In Frontend

Your frontend already has the right fetch pattern in api.ts (line 497) using credentials: "include", and your attachment drafts already keep the raw File object in add-task-dialog.tsx (line 71).

Add a helper in src/lib/api.ts like this:

export async function uploadFileInChunks( file: File, bucket = "default", onProgress?: (percent: number) => void, ) { const startRes = await fetch(getApiUrl("/api/files/upload-sessions"), { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ fileName: file.name, sizeBytes: file.size, mimeType: file.type || "application/octet-stream", bucket, }), }); const startPayload = await startRes.json(); if (!startRes.ok || !startPayload.success) throw new Error(startPayload.message);

const { session, chunkSizeBytes } = startPayload.data;

for (let offset = session.uploadedBytes; offset < file.size; offset += chunkSizeBytes) { const end = Math.min(offset + chunkSizeBytes, file.size); const chunk = await file.slice(offset, end).arrayBuffer();

const chunkRes = await fetch(
  getApiUrl(`/api/files/upload-sessions/${session.id}/chunks`),
  {
    method: "PUT",
    headers: {
      "Content-Type": "application/octet-stream",
      "Content-Range": `bytes ${offset}-${end - 1}/${file.size}`,
    },
    credentials: "include",
    body: chunk,
  },
);

const chunkPayload = await chunkRes.json();
if (!chunkRes.ok || !chunkPayload.success) throw new Error(chunkPayload.message);

onProgress?.(chunkPayload.data.session.progressPercent);

if (chunkPayload.data.session.status === "COMPLETED") {
  return chunkPayload.data.file;
}

}

throw new Error("Upload did not complete."); } The cleanest place to call it is in app-sidebar.tsx (line 339), inside handleCreateTasks, because that is where task creation already happens. If you want visible per-file progress bars in the dialog, then move the upload call closer to handleSubmit (line 1821).

Important Gaps

Cross-origin chunk upload will currently fail from the browser unless you fix CORS first. PUT is missing from cors.ts (line 43), but the new chunk endpoint uses PUT. Your frontend picker allows .ppt, .pptx, .json, and .zip in add-task-dialog.tsx (line 635), but the backend MIME allowlist in constants.ts (line 58) does not currently allow those types. Biggest gap: task creation does not accept uploaded file IDs. The task schema has no attachment/file input in task schemas (line 44), even though a TaskAttachment table exists in schema.prisma (line 660). So right now you can upload files, but you cannot persist them onto tasks without one more backend step. If you want, I can do the next part too: patch the backend for PUT CORS + add a proper attach uploaded file to task API shape, then wire the frontend to it cleanly.

graph-upload-progress-api.md Document · MD Open in

3:39 PM Model changed from GPT-5.4 to GPT-5.5. it is basicakly a progress tracking thing ok forthe frontend feedback ok this are the frontend compontents can u plzz intriagte it there

It’s in the task-create dialog here:

Main upload/attachment UI: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/add-task-dialog.tsx (line 851) TaskDescriptionWithAttachments(...)

The actual Upload button is here: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/add-task-dialog.tsx (line 1000) It triggers the hidden file input a few lines above at same file (line 972).

Files get turned into attachment drafts here: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/add-task-dialog.tsx (line 659) createAttachmentDraft(file)

That upload section is rendered under the "Add description" row here: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/add-task-dialog.tsx (line 1689)

Important bit: this looks like frontend-only attachment handling right now, not real backend upload.

Task submit path: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/app-sidebar.tsx (line 339) Payload builder: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/lib/task-draft-helpers.ts (line 335) attachments are not included in that create-task payload, so the button currently adds previews to the draft UI but doesn’t actually send files to the API.

There is also an unused R2 upload helper here: C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/lib/r2.ts (line 30)

Show more 3:41 PM

Worked for 17m 31s Integrated the upload progress flow into the task-create attachment UI.

What changed:

Added uploadUserFileWithProgress(...) in api.ts (line 645). Updated add-task-dialog.tsx (line 76) so picked files now auto-upload through the new chunked API, show percent progress, success, and failed states. The Create Task button now waits while files are uploading and blocks if an upload fails. Removed files/cancelled dialog abort pending uploads. Fixed backend CORS for chunk PUT requests in cors.ts (line 46). Matched backend allowed MIME types to the frontend picker for JSON, PPT/PPTX, and ZIP in constants.ts (line 72). Verification:

npm run build passed for frontend. npm run build passed for backend. npm.cmd exec eslint src/components/add-task-dialog.tsx src/lib/api.ts passed. Full frontend lint still fails because of pre-existing unrelated lint errors in other files. CORS preflight for PUT chunk upload returns 204 with GET,POST,PUT,OPTIONS. Local frontend is already responding at http://localhost:5081.

One honest note: this now uploads files for real and stores returned file metadata in the draft state, but task creation still does not persist a TaskAttachment relation because the backend task-create schema still has no attachment/file-id input.

Web preview Website Open in

Edited 4 files +683 -218 Undo Review

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/add-task-dialog.tsx +483 -187

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/lib/api.ts +190 -26

src/server/auth/cors.ts +1 -1

Show 1 more file

3:59 PM User attachment User attachment POST /api/files/upload-sessions 500 in 3508ms 4:10 PM

Worked for 23m 37s Implemented it, bro.

The frontend now uses the upload-session API with real progress:

Creates upload session. Uploads chunks with progress. Shows uploading/uploaded/failed states in the task dialog. Blocks submit while files are still uploading or failed. Sends uploaded fileIds into task create payload. Backend is also patched:

Fixed Graph upload-session payload. Enabled PUT in CORS. Added missing file MIME types. Task create now stores uploaded files as TaskAttachment rows. Applied local Prisma migrations; DB is now up to date. Verified:

Backend build passed. Frontend build passed. Targeted frontend ESLint passed. Upload smoke test passed: upload COMPLETED. Task smoke test passed: task created with AttachmentCount = 1, then temp task deleted. For the red failed card already open in your dialog, remove and re-add that file once. That existing failed draft won’t auto-retry.

Edited 7 files +234 -117 Undo Review

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/app-sidebar.tsx +35 -29

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/lib/api.ts +32 -18

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/lib/task-draft-helpers.ts +34 -19

Show 4 more files

4:33 PM User attachment what about editor uplaod and also how are u keepng the attachments for a perticulare task ? plzz tell me how are u making this happen broo 4:37 PM

Worked for 4m 42s The editor upload in your screenshot is now using the same upload system, but with one important distinction:

Clicking Upload adds files as task attachments and shows progress in the attachment cards below. Pasting an image into the editor inserts it inline first, then after upload finishes I swap the temporary blob: URL to the real backend file URL: /api/files/{fileId}/content. If that attachment is removed, the matching inline editor image is removed too, so we don’t save broken local blob URLs. How attachments are kept for a particular task:

Frontend uploads file first via uploadUserFileWithProgress in api.ts (line 649). Backend stores the uploaded file metadata in UserGraphFile. Frontend keeps uploadedFile.id on that exact draft attachment. On task submit, frontend sends attachmentFileIds for that specific draft/task via task-draft-helpers.ts (line 41). Backend validates those files belong to the current user, then creates TaskAttachment rows with taskId, uploadedById, fileName, fileUrl, fileSize, mimeType in task-record.ts (line 122). So the relationship is: Task -> TaskAttachment -> uploaded Graph file URL/metadata.

Verified again: frontend targeted ESLint passed, frontend build passed, backend build passed.

Edited 2 files +110 -10 Undo Review

src/components/add-task-dialog.tsx +98 -2

src/lib/api.ts +12 -8

4:42 PM so there is a task attachment table and there the task id and the attachent is listed how is it tell me 4:43 PM

Yes bro, exactly.

There is a TaskAttachment table. Each row means: “this file belongs to this task.”

Schema is in schema.prisma (line 660):

model TaskAttachment { id String @id @default(uuid()) taskId String uploadedById String fileName String fileUrl String fileSize Int? mimeType String? createdAt DateTime @default(now())

task Task @relation(fields: [taskId], references: [id], onDelete: Cascade) uploadedBy User @relation("AttachmentUploader", fields: [uploadedById], references: [id])

@@index([taskId]) } So a row looks conceptually like:

id: attachment-row-id taskId: task-123 uploadedById: user-456 fileName: screenshot.png fileUrl: /api/files/graph-file-id/content fileSize: 4200000 mimeType: image/png Flow is:

File uploads to Graph first. Backend saves that uploaded file in UserGraphFile. Frontend sends attachmentFileIds while creating the task. Backend creates TaskAttachment rows for that task in task-record.ts (line 122). Important detail: TaskAttachment does not store the actual file bytes. It stores the task link plus file metadata/url. The actual file lives in Microsoft Graph, and UserGraphFile is the storage record.

4:43 PM User attachment The editor upload in your screenshot is now using the same upload system, but with one important distinction:

Clicking Upload adds files as task attachments and shows progress in the attachment cards below. Pasting an image into the editor inserts it inline first, then after upload finishes I swap the temporary blob: URL to the real backend file URL: /api/files/{fileId}/content. If that attachment is removed, the matching inline editor image is removed too, so we don’t save broken local blob URLs.

for this image on the editor plzz use the graph api to upload it to the cloud an then this upload will be attacnhed to that task and then then use the image url requeast form the graph to get the image and then show it on the blob of the edit can we do this

so current thing is very perfect 4:49 PM

Worked for 20s Yes bro, that is exactly the right architecture, and we should keep it like this:

When image is pasted/uploaded in editor:

First it shows instantly using local blob: preview, so UX feels fast. At the same time, frontend uploads that image through /api/files/upload-sessions. Backend uploads the real bytes to Microsoft Graph cloud. Backend saves the Graph file metadata in UserGraphFile. Frontend receives uploadedFile.id. Editor replaces the temporary blob: image URL with stable backend URL: /api/files/{fileId}/content Then when the image is shown later:

Browser requests /api/files/{fileId}/content. Backend checks current logged-in user owns that file. Backend asks Graph for fresh @microsoft.graph.downloadUrl. Backend redirects to that fresh Graph image URL. Image displays in editor/task description. Important: we should not store the raw Graph download URL directly, because Graph download URLs expire. The stable thing to save in the editor HTML is:

And for task attachment relation, same uploaded image/file is also attached to the task through TaskAttachment using attachmentFileIds.

So final model is:

Task -> TaskAttachment row -> fileUrl: /api/files/{fileId}/content -> fileName, size, mimeType -> Description HTML -> So yes: cloud upload via Graph, attached to task, and editor image loads from Graph through our backend route.

4:49 PM ok now add a small loading feedback ont he top left on the image when it is uploaded make it small and it should work fine 4:50 PM

Worked for 4m 48s Added it.

Now when an inline editor image is still uploading, the editor shows a small top-left badge directly on that image with a spinner and progress text like 12%. Once the Graph upload finishes and the image URL swaps to /api/files/{fileId}/content, the badge disappears automatically.

Touched:

task-rich-text-editor.tsx (line 213) add-task-dialog.tsx (line 1140) Verified:

Targeted ESLint passed. Frontend build passed.

Edited 2 files +201 -47 Undo Review

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/add-task-dialog.tsx +30 -11

C:/Users/Lenovo/tdfdaimonds/v2_task_manager_frontend/src/components/task-rich-text-editor.tsx +171 -36

4:55 PM