vercel / vercel/ai-elements

Automatic tracking of file uploads

Open
#262 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
2.4k
Forks
283
Avg merge
32m
Merged PRs (30d)
1

Description

## Current behaviour
File upload is supported through the usePromptInputAttachments but tracking the uploaded files themselves has to be done manually. We've had to implement our own solution for tracking which files are uploading and what their status is (uploaded vs uploading vs failed).

## Proposed solution
It would be great if there was a way of handling this automatically, currently we've implemented a tracker for uploading files so it would be great to have this as part of the usePromptInputAttachments hook (https://github.com/vercel/ai-elements/blob/main/packages/elements/src/prompt-input.tsx) and have it automatically update based on the files' status. For example:

export const iuu = () => {
  ...
  return { context, uploading, uploaded, uploadFailures };
};

Potential code change (context will also need to be adjusted to work with this):

export const usePromptInputAttachments = () => {
  // Dual-mode: prefer provider if present, otherwise use local
  const provider = useOptionalProviderAttachments();
  const local = useContext(LocalAttachmentsContext);
  const context = provider ?? local;
  if (!context) {
    throw new Error(
      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
    );
  }

  + const uploading = context.files.filter((file) => file.type === "uploading");
  + const uploads = context.files.filter((file) => file.type === "uploaded");
  + const uploadFailures = context.files.filter((file) => file.type === "upload_error");

  - return context;
  + return { context, uploading, uploads, uploadFailures };
};

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/elements/src/prompt-input.tsx at usePromptInputAttachments and inspect how its context is provided. Update the hook and its context handling to expose files grouped by uploading, uploaded, and upload_error status, then verify consumers receive the proposed return shape.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.