i've managed to select more than 10 uploads just from local upload ( uploading files from my computer)

[cheedli]

well in the end only 10 documents were uploaded but i guess this should be an issue since a user can think that he's uploading more then 10

[stephenOwino]

I'd like to work on this issue. Currently, users can select more than 10 files, but only 10 are uploaded without any feedback.

What should the expected behavior be?
Option 1: Enforce the 10-file limit

• Prevent users from selecting more than 10 files?
• Show error: "Maximum 10 files allowed?

Option 2: Allow unlimited selection with clear feedback?

• Users can select 15, 20, or 100+ files
• Show message: "You selected 15 files. Only the first 10 will be uploaded?

Option 3: Remove the limit entirely

• Allow users to upload as many files as they want
• No 10-file restriction

Which approach should I implement?

[BSalaeddin]

Hey @stephenOwino , thanks for offering to work on this.

I tested and also checked the current implementation for local picker and drag/drop. The limit is already enforced at selection time, not only at upload time:

• If limit = 10 and the user selects 15, UpUp only adds the first 10 to the selected list.

• Once the limit is reached, it triggers onWarn('Allowed limit has been surpassed!') and stops adding more files.

• If the consumer app does not pass onWarn, there’s no visible message, but the extra files simply don’t get added to the list, and only the accepted files will upload.

So it’s not exactly “15 selected and only 10 uploaded with no feedback” by default. It’s more “extras are ignored once the limit is hit, and feedback is available via onWarn if the app surfaces it”.

That said, this does highlight a real UX improvement opportunity. My suggestion would be:

1. Improve the warning message to include counts, for example: “You selected 15 files. Only 10 were added.”

2. Also, we should show a warning in the UI by default when the limit is exceeded, even if the consumer didn’t provide onWarn, so users always understand why extra files weren’t added.

Do you agree with that direction? If yes, you’re welcome to open a PR implementing (1) and (2)

[stephenOwino]

@BSalaeddin thanks and I agree with your suggestion.Let me work on them

[stephenOwino]

@BSalaeddin done,please review.thanks

[BSalaeddin]

Hey @stephenOwino , thanks for working on this.

I like the direction of making the limit feedback visible by default. The limit is already enforced at selection time (the loop stops adding once newFilesMap.size >= limit), so the main UX gap today is that users do not know why extra files were ignored unless the host app surfaces the warning.

Two blockers in the current PR:

1. The counts in the warning message are wrong in common cases.
   Right now the message uses limit as “Only X were added”, but X should be “how many from this selection were actually added”.

Example:

• limit = 10
• already selected = 7
• user selects 5 more
  Only 3 can be added, 2 ignored.
  Current message would say “Only 10 were added”, which is misleading.

You already track addedThisBatch, so the message should use:

• addedCount = addedThisBatch.length
• ignoredCount = totalSelectedFiles - addedCount
  (and optionally include the limit in the text, like “(limit 10)”)

2. onWarn(...) is called twice when the limit is hit.
   Because onWarn also forwards to warningHandler(message), consumers will receive two warning events for one action.
   Suggestion: build one final message and call onWarn once.

Suggestion for “built in by default but override possible”:
Keep the default WarningAlert rendering, but let consumers override the UI using the existing callback pattern.
Example of current pattern (no toast dependency):

• consumer passes warningHandler={(msg) => setMyWarning(msg)}
• consumer renders their own banner, modal, etc.

If we want a cleaner override, we can add a prop like renderWarning or WarningAlertComponent and default it to the current WarningAlert.

Small note: please consider setting the close button type="button" (it can accidentally submit a parent form).