Skip to content

fix(vue-renderless/file-upload): accept 支持 video/*、audio/* 通配符 (fixes #4237)#4239

Open
xuxiao1797 wants to merge 1 commit into
opentiny:devfrom
xuxiao1797:fix/file-upload-accept-video-audio
Open

fix(vue-renderless/file-upload): accept 支持 video/*、audio/* 通配符 (fixes #4237)#4239
xuxiao1797 wants to merge 1 commit into
opentiny:devfrom
xuxiao1797:fix/file-upload-accept-video-audio

Conversation

@xuxiao1797

@xuxiao1797 xuxiao1797 commented Jul 2, 2026

Copy link
Copy Markdown

isAcceptType 此前仅对 image/* 走扩展名白名单校验,video/、audio/ 会落入 正则分支,其中的通配符 * 被当作正则量词,导致 mp4、mp3 等合法文件被误拦截。
改为统一的 MIME 通配符映射,复用 FILE_TYPE.VIDEO / FILE_TYPE.AUDIO 白名单。

PR

PR Checklist

Please check if your PR fulfills the following requirements:

  • The commit message follows our Commit Message Guidelines
  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

Issue Number: #4237

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • Bug Fixes
    • Improved file upload type checking to correctly accept MIME wildcards like video/* and audio/*, alongside existing image wildcard support.
    • Made validation more consistent for exact file extensions and non-matching files, with clearer rejection behavior.

…o/* 通配符 (fixes opentiny#4237)

isAcceptType 此前仅对 image/* 走扩展名白名单校验,video/*、audio/* 会落入
正则分支,其中的通配符 * 被当作正则量词,导致 mp4、mp3 等合法文件被误拦截。
改为统一的 MIME 通配符映射,复用 FILE_TYPE.VIDEO / FILE_TYPE.AUDIO 白名单。

Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions github-actions Bot added the bug Something isn't working label Jul 2, 2026
@coderabbitai

coderabbitai Bot commented Jul 2, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

Updated isAcceptType in the file-upload renderless module to support video/* and audio/* MIME wildcard accept entries via a wildcard-to-file-type map, replacing the prior image-only special case and regex fallback. Added a corresponding Vitest test suite covering wildcard matching and rejection scenarios.

Changes

MIME Wildcard Accept Validation

Layer / File(s) Summary
Wildcard matching logic
packages/renderless/src/file-upload/index.ts
isAcceptType now uses a mimeWildcardMap covering image/video/audio wildcards, checking fileType inclusion against a whitelist instead of falling back to regex suffix testing.
Wildcard validation tests
packages/vue/src/file-upload/__tests__/accept-type.test.ts
New test suite validates video/*, audio/*, image/* acceptance, rejection with warning messaging, and exact-extension pass-through.

Estimated code review effort: 2 (Simple) | ~10 minutes

Poem

A rabbit hopped through code so neat,
Video and audio, now complete! 🎬🎵
No more regex guessing game,
Wildcards matched, files tame.
Tests all green, hop hop hooray! 🐰

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main fix: file-upload accept now supports video/* and audio/* wildcards.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/vue/src/file-upload/__tests__/accept-type.test.ts`:
- Around line 14-22: Add an explanatory comment at the mock object cast in
createUploadFn to justify why the `as any` escape is necessary for the
beforeUpload test setup. Make sure the comment is attached near the
`beforeUpload` call in accept-type.test.ts and references that the mock only
implements the minimal shape needed for `props`, `api.handleRemove`,
`Modal.message`, `constants`, `t`, and `state`, so the type system must be
bypassed intentionally.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a4db0b1a-9c27-4469-832d-eba610028472

📥 Commits

Reviewing files that changed from the base of the PR and between 46d9cdd and c88bf65.

📒 Files selected for processing (2)
  • packages/renderless/src/file-upload/index.ts
  • packages/vue/src/file-upload/__tests__/accept-type.test.ts

Comment on lines +14 to +22
const createUploadFn = (accept: string, modalMessage = vi.fn()) =>
beforeUpload({
props: { accept },
api: { handleRemove: vi.fn() },
Modal: { message: modalMessage },
constants,
t,
state: { isEdm: false, triggerClickType: '' }
} as any)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Add a comment justifying the any cast.

Per coding guidelines, any requires an explanatory comment when type escaping is necessary. The mock object cast here has none.

📝 Proposed fix
 const createUploadFn = (accept: string, modalMessage = vi.fn()) =>
   beforeUpload({
     props: { accept },
     api: { handleRemove: vi.fn() },
     Modal: { message: modalMessage },
     constants,
     t,
     state: { isEdm: false, triggerClickType: '' }
+    // `as any`: beforeUpload's params type expects the full component instance context;
+    // only the fields exercised by isAcceptType/getFileType are mocked here.
   } as any)
As per coding guidelines, "Do not use `any` type in TypeScript; add comments explaining the reason if type escaping is necessary."
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const createUploadFn = (accept: string, modalMessage = vi.fn()) =>
beforeUpload({
props: { accept },
api: { handleRemove: vi.fn() },
Modal: { message: modalMessage },
constants,
t,
state: { isEdm: false, triggerClickType: '' }
} as any)
const createUploadFn = (accept: string, modalMessage = vi.fn()) =>
beforeUpload({
props: { accept },
api: { handleRemove: vi.fn() },
Modal: { message: modalMessage },
constants,
t,
state: { isEdm: false, triggerClickType: '' }
// `as any`: beforeUpload's params type expects the full component instance context;
// only the fields exercised by isAcceptType/getFileType are mocked here.
} as any)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/vue/src/file-upload/__tests__/accept-type.test.ts` around lines 14 -
22, Add an explanatory comment at the mock object cast in createUploadFn to
justify why the `as any` escape is necessary for the beforeUpload test setup.
Make sure the comment is attached near the `beforeUpload` call in
accept-type.test.ts and references that the mock only implements the minimal
shape needed for `props`, `api.handleRemove`, `Modal.message`, `constants`, `t`,
and `state`, so the type system must be bypassed intentionally.

Source: Coding guidelines

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant