Media Library: Support Upload from URL on media-new page #41627

arthur791004 · 2025-02-07T09:18:06Z

Related to p1738900618822769/1738898875.646109-slack-CRWCHQGUB

Proposed changes:

Add the Upload from URL button on the media-new page. It's a little hacky to display the upload status 🙈
Change the button back to the link as suggested Media Library: Support Upload from URL on media-new page #41627 (comment)
Keep the Upload from URL link and allow users to toggle the form to align with the design
Reset the status of the upload from URL form when the inline uploader is closed

Screenshots

Media Library	Media New

Demo

media-new-upload-url.mov

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Apply changes to your site
Go to /wp-admin/media-new.php?untangling-media=true
Ensure you can upload media from URL
Go to /wp-admin/upload.php?untangling-media=true
Ensure you can still upload media from URL
Go to Editor
Ensure you can still upload media from URL by Image Block > Media Library > Upload from UR

github-actions · 2025-02-07T09:19:02Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the feat/media-url-upload-form-on-media-new-page branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack-mu-wpcom-plugin feat/media-url-upload-form-on-media-new-page

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-02-07T09:19:09Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Mu Wpcom plugin:

Next scheduled release: WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Wpcomsh plugin:

Next scheduled release: Atomic deploys happen twice daily on weekdays (p9o2xV-2EN-p2).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

github-actions · 2025-02-07T09:26:49Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.php	0/52 (0.00%)	0.00%	10 💔

Full summary · PHP report · JS report

fushar · 2025-02-07T10:02:02Z

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.js

 document.addEventListener( 'DOMContentLoaded', function () {
+	const pluploadUploadUI = document.getElementById( selectors.PLUPLOAD_UPLOAD_UI );
+	const selectFilesButton = document.getElementById( selectors.PLUPLOAD_BROWSE_BUTTON );
+	if ( pluploadUploadUI && selectFilesButton ) {


I think this is all too complicated. Can we try like this:

We don't need to split wpcom_media_url_upload() into append_wpcom_media_url_upload() and enqueue_wpcom_media_url_upload_form().

In media-new.php, we simply do add_action( 'post-plupload-upload-ui', 'wpcom_media_url_upload' );

In here, we just check document.getElementById('wpcom-media-url-upload') and then render the React component there.

I did the above before, but scratched it and decided not to implement it in media-new.php 😄

I tried but the action is outside the of plupload-upload-ui element 🙈

Sorry I don't get it, could you explain more?

Oh.... I see now. Thinking...

OK, so I think we need to consider something like add_action( 'post-plupload-upload-ui', 'append_wpcom_media_url_upload', 30 );.

This is because the text "You are using the multi-file uploader..." belongs to the uploader, so we should put other feature outside of it:

Maybe we can change the text to "Or upload from URL" or change to a link as per original design.

What do you think? It's weird that the uploader behavior is different in this page 🤦

Yep the page is totally different 🫠

Maybe we can change the text to "Or upload from URL" or change to a link as per original design.

Sounds good to change to a link as per original design since we have already simplified the messages inside the form 👍

fushar · 2025-02-07T10:07:03Z

...ts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/style.scss

@@ -1,15 +1,32 @@
 .wpcom-media-url-upload-form {
-	margin-top: -15px;
-	margin-bottom: 15px;
-	height: 30px;


It needs to be here, otherwise when you click on the Upload button, the input field shows and the "You are currently using ..." text will shift to bottom.

but it makes the UI weird on mobile 😓

arthur791004 · 2025-02-10T05:24:30Z

@jameskoster We're adding the Upload from URL link to the Upload New Media page, and updating the styles. What do you think?

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.php

fushar · 2025-02-10T06:47:37Z

...ts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/style.scss

+	}
+}
+
+#plupload-upload-ui.has-wpcom-media-url-upload {


I wonder why we need .has-wpcom-media-url-upload? As far as I can tell, the #plupload-upload-ui is only present in media-new.php 🤔

I just want to keep it safe to apply styles to #plupload-upload-ui only when it has .has-wpcom-media-url-upload. Maybe it's overthinking 🤔

fushar

It's perfect 😂

arthur791004 added 2 commits February 7, 2025 17:05

Media Library: Support Upload from URL on media-new page

43ff894

changelog

60c5f94

arthur791004 self-assigned this Feb 7, 2025

arthur791004 requested a review from a team February 7, 2025 09:18

arthur791004 added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Type] Task labels Feb 7, 2025

github-actions bot added [mu wpcom Feature] Wpcom Media [Package] Jetpack mu wpcom WordPress.com Features [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Wpcomsh labels Feb 7, 2025

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Feb 7, 2025

fushar reviewed Feb 7, 2025

View reviewed changes

arthur791004 added 4 commits February 10, 2025 12:49

Change the button back to a link

2cceac4

Allow to toggle the upload from url form

1d87154

Reset the form when the inline uploader close

508aa4e

Remove the min-height of the form

79c7d85

arthur791004 requested a review from jameskoster February 10, 2025 05:21

Fix php lint

d9d1138

arthur791004 added [Status] Needs Team Review and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Feb 10, 2025

fushar reviewed Feb 10, 2025

View reviewed changes

fushar previously approved these changes Feb 10, 2025

View reviewed changes

arthur791004 added 2 commits February 11, 2025 12:23

Prevent the default behavior of the link

5f5f958

Fix the position of the Copy URL to clipboard button

e9e6634

arthur791004 dismissed fushar’s stale review via e9e6634 February 11, 2025 04:24

arthur791004 merged commit db6409c into trunk Feb 11, 2025
61 checks passed

arthur791004 deleted the feat/media-url-upload-form-on-media-new-page branch February 11, 2025 06:01

github-actions bot removed the [Status] Needs Team Review label Feb 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Media Library: Support Upload from URL on media-new page #41627

Media Library: Support Upload from URL on media-new page #41627

arthur791004 commented Feb 7, 2025 •

edited

Loading

github-actions bot commented Feb 7, 2025 •

edited

Loading

github-actions bot commented Feb 7, 2025 •

edited

Loading

github-actions bot commented Feb 7, 2025 •

edited

Loading

fushar Feb 7, 2025

arthur791004 Feb 7, 2025 •

edited

Loading

fushar Feb 7, 2025

fushar Feb 7, 2025

fushar Feb 7, 2025

arthur791004 Feb 10, 2025

arthur791004 Feb 10, 2025

fushar Feb 7, 2025

arthur791004 Feb 7, 2025

arthur791004 commented Feb 10, 2025

fushar Feb 10, 2025

arthur791004 Feb 10, 2025

fushar left a comment

Media Library: Support Upload from URL on media-new page #41627

Media Library: Support Upload from URL on media-new page #41627

Conversation

arthur791004 commented Feb 7, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Feb 7, 2025 • edited Loading

github-actions bot commented Feb 7, 2025 • edited Loading

github-actions bot commented Feb 7, 2025 • edited Loading

Code Coverage Summary

Choose a reason for hiding this comment

arthur791004 Feb 7, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arthur791004 commented Feb 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fushar left a comment

Choose a reason for hiding this comment

arthur791004 commented Feb 7, 2025 •

edited

Loading

github-actions bot commented Feb 7, 2025 •

edited

Loading

github-actions bot commented Feb 7, 2025 •

edited

Loading

github-actions bot commented Feb 7, 2025 •

edited

Loading

arthur791004 Feb 7, 2025 •

edited

Loading