Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Bulk upload from a `hasMany` upload field: closing the drawer once without uploading silently drops the next upload (docs created, field unchanged)

Closed Beginner friendly
  • Is something wrong?
#18,652 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Metehan-Bicer is already working on this.

Since Oct 10, 2026.

  • #18654 by @Metehan-Bicer — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
nextjs, react, typescript
Domain
frontend

Research direction

The callback is reset in elements/BulkUpload/index.tsx inside the onModalStateChanged effect, and onLocalFileSelection in fields/Upload/Input.tsx opens the drawer without re-registering it. Start by reading how setOnSuccess is registered in both files, then reproduce the steps: close the drawer without uploading, reopen it, upload, and check whether the field value updates. Done means the field list includes the new documents after the second upload, without a page reload.

Written by the indexing model from the issue text.

Description

Bug

Describe the Bug

In a hasMany upload field, open the bulk upload drawer with "Create New", close it without uploading (X → "Leave anyway", click outside, or Escape), then open it again and upload files. The documents are created on the server, the toast says "Successfully saved N files", the drawer closes — but the field value is not updated: nothing is added to the list. Reloading the page restores the normal behaviour.

Cause (read in @payloadcms/ui 3.90.2 dist and in main):

  • elements/BulkUpload/index.tsx — in the onModalStateChanged effect, every close of the drawer resets the success callback to a no-op (setOnSuccess(() => () => null)).
  • fields/Upload/Input.tsx — onLocalFileSelection opens the drawer without re-registering the callback; it is only (re)registered by useEffect(() => { setOnSuccess(onUploadSuccess) }, [value, path, onUploadSuccess, setOnSuccess]), and onUploadSuccess is memoized on [value, …]. After a close with no upload, the value has not changed, so the callback stays a no-op for the rest of the page session.

Related: #17560 (proposes registering the callback at open time, which would also cover this case).

Suggested fix: in onLocalFileSelection, call setOnSuccess(onUploadSuccess) right before openModal(drawerSlug) (and add both to the dependency array) — or stop resetting the callback on close, since each upload field has its own BulkUploadProvider.

Link to the code that reproduces this issue

Reproduces with the stock hasMany upload field, no custom code: any collection with { name: 'photos', type: 'upload', relationTo: 'media', hasMany: true }.

Reproduction Steps

  1. Edit a document that has a hasMany upload field.
  2. Click "Create New" in the field → the bulk upload drawer opens.
  3. Close it without adding files (X, or click the dimmed background).
  4. Click "Create New" again, add 2 files, click "Save".
  5. Toast "Successfully saved 2 files", drawer closes.
  6. Expected: the 2 new documents appear in the field list (unsaved). Actual: the list is unchanged; the documents exist in the collection.
  7. Reload the page and repeat steps 4–5 without step 3: works.

Which area(s) are affected?

area: ui

Environment Info

  • Payload 3.90.2, @payloadcms/ui 3.90.2, @payloadcms/db-postgres 3.90.2
  • Next.js 16.3.8, React 19.3.0, Node 24
  • Browsers: Safari iOS 26 and Chrome 142 (desktop)
Dominant language
TypeScript
Stars
45.3k
Forks
4.3k
Avg merge
1d 11h
Merged PRs (30d)
238

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

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.

More from payloadcms/payload

All issues in payloadcms/payload

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.