Media Utils: Restrict file uploads with multiple prop in uploadMedia and mediaUpload
#69175
Conversation
yogeshbhutkar
requested review from
ellatrix,
ajitbohra and
fabiankaegy
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| }: UploadMediaArgs ) { | ||
| if ( ! multiple && filesList.length > 1 ) { |
There was a problem hiding this comment.
Let's add a unit test for this accordingly in packages/media-utils/src/utils/test/upload-media.ts
There was a problem hiding this comment.
The change here is unnecessary, let's revert that.
| new UploadError( { | ||
| code: 'GENERAL', | ||
| message: __( 'Only one file can be used here.' ), | ||
| } ) |
There was a problem hiding this comment.
Just use a regular Error if you don't want to pass a file.
|
Thanks for the review @swissspidy, I've implemented the above changes. Can you please re-review the PR?
|
swissspidy
added
[Type] Enhancement
| }: UploadMediaArgs ) { | ||
| if ( ! multiple && filesList.length > 1 ) { | ||
| onError?.( new Error( __( 'Only one file can be used here.' ) ) ); |
There was a problem hiding this comment.
I think the error message could be improved, but I don't have better ideas at the moment. Let's follow-up on it as needed.
What?
Closes #68629
This PR adds a
multipleprop to theuploadMediaandmediaUploadfunctions. The prop defaults toTrue. When set toFalse, any attempts to drop or select multiple images result in an error message returned to the user, and the process aborts completely due to an early return.Why?
This PR uses a generalized approach to implement prop-based restrictions on file uploads instead of implementing separate logic in the consumers. Some consumer implementations include:
gutenberg/packages/block-editor/src/components/background-image-control/index.js
Line 316 in 0c42f22
gutenberg/packages/block-library/src/site-logo/edit.js
Line 509 in 0c42f22
How?
The
multipleprop, which accepts a boolean value, has been introduced in theuploadMediaandmediaUploadfunctions. Whenmultipleis set tofalseand multiple images are selected, the process is aborted early, triggering theonErrorcallback.Testing Instructions
1.1. Site logo block
1.2. Featured image block
1.3. Featured image panel in the document sidebar
1.4. Media & text block
1.5. Cover block
Screencast