Media Library: Implement upload media from URL #41089

fushar · 2025-01-15T16:32:08Z

Fixes https://github.com/Automattic/dotcom-forge/issues/10180

Proposed changes:

This PR implements the feature where we can upload media files from URL in the Media Library and Site Editor.

The UX is implemented by following the default file upload behavior as similar as possible.

See the following videos:

Media Library

48MySt.mp4

Site Editor

lFwwGW.mp4

Implementation Details

This feature is implemented by showing a simple url input form after the Plupload uploader via the post-plupload-upload-ui hook. On submitting the form, it calls an AJAX handler, which then call Core's download_url() and then media_handle_sideload(). This logic is very similar to that of the original endpoint used by Calypso version of the Media Library.

Limitations

This feature is currently not available in Media -> Add New Media File.
This feature currently won't send video files to VideoPress; we still need to use the dropzone.

Failure Cases

The upload form can handle failure cases, e.g. when the media has unsupported extension. It will show an error notice, similar to when we upload the file via the dropzone:

PwQbJv.mp4

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:

Patch this PR using the instructions provided by the bot.
Try to upload via URL in both Media -> Library and Site Editor as per the videos above.
Test in both Simple and Atomic sites.
Try to break it.

github-actions · 2025-01-15T16:33:03Z

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 wpcom-media-url-import 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 wpcom-media-url-import

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-01-15T16:33:03Z

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!

okmttdhr

Tested this both on Media -> Library and Site Editor and worked well 👍

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx

okmttdhr · 2025-01-22T02:33:08Z

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx

+
+import './style.scss';
+
+const WpcomMediaUrlUploadForm = ( { ajaxUrl, action, nonce, isSiteEditor } ) => {


I believe we can turn jsx into tsx

taipeicoder · 2025-01-22T09:16:43Z

It seems that window.wp.media.frame.content.get().collection is unset whenever the preview modal is shown. As a result, the following flow breaks for me:

Open the preview modal and close it.
Try to upload media via URL.
Get the JS error Uncaught TypeError: Cannot read properties of undefined (reading 'add') pointing to the line https://github.com/Automattic/jetpack/pull/41089/files#diff-1488c0a404dd4b7e54404ac816954fb83810886fcb03fc282ea8845c4dfc8503R55

Screen.Capture.on.2025-01-22.at.17-12-33.mp4

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx

arthur791004 · 2025-01-23T06:35:46Z

Left minor feedback as follows:

It would be better to increase the gap between input and button
How to dismiss the input to restore the page to the link?

The user may not notice there is a link... There are lots of items there and, weirdly, the link is shown between storage usage and max size 😅

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

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx

fushar · 2025-01-23T07:23:35Z

The user may not notice there is a link... There are lots of items there and, weirdly, the link is shown between storage usage and max size 😅

It's all based on the design in https://github.com/Automattic/dotcom-forge/issues/10180#issuecomment-2572909885. @jameskoster, thoughts?

arthur791004 · 2025-01-23T07:26:03Z

It's all based on the design in https://github.com/Automattic/dotcom-forge/issues/10180#issuecomment-2572909885. @jameskoster, thoughts?

Yep but the design doesn't have the storage usage there. Maybe we can remove it since there is another one below the page title 🤔

okmttdhr

I could check the visual updates 👍

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx

fushar · 2025-01-30T13:53:14Z

BTW I found this change also affected media library

But isn't this the whole reason of the PT? This is to (re-)allow users to upload images from URL in the Site Editor, because without the editor iframe, we lose the ability to do that using native Core's Media Library (see: Automattic/wp-calypso#98590)

github-actions · 2025-01-30T14:06:24Z

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php	0/216 (0.00%)	0.00%	1 💔

1 file is newly checked for coverage.

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

Full summary · PHP report · JS report

fushar · 2025-01-30T14:15:37Z

How to dismiss the input to restore the page to the link?

@jameskoster, thoughts? Should we allow the user to "close" the form and show the link back? (I'm not sure if it's worth it IMO)

fushar · 2025-02-03T04:45:26Z

I think we should only display the storage info in this location if the user is approaching maximum capacity (>95% or something). Otherwise I agree it's a bit distracting.

I'm not sure it's a good idea. The Calypso version of this page shows this storage info in all cases. If we remove it, I'm afraid users will lose this functionality.

Maybe we can remove it since there is another one below the page title 🤔

Unfortunately, in the Site Editor (media blocks), it's the only place where we show the storage info, so we can't remove it.

Also agree we should increase the gap between input + submit button slightly. 6px seems to be quite common across wp-admin.

This is done ✅

Finally can we double-check the link color?

Unfortunately, the link color comes from Core (https://github.com/WordPress/wordpress-develop/blob/bcdca3f9925f1d3eca7b78d231837c0caf0c8c24/src/wp-includes/css/media-views.css#L39) with very high specificity of the selector. It's not easy to override it without JavaScript magic because there's no way to get the current link color of the current color scheme 🥲

To overcome the above issue(s), what if we make it as a button, and put it above the storage info? Like this:

I pushed it to this PR. What do you think?

arthur791004 · 2025-02-04T03:14:41Z

Unfortunately, in the Site Editor (media blocks), it's the only place where we show the storage info, so we can't remove it.

How about using the $pagenow to determine whether to hide it? Is it a good idea 🤔

lsl · 2025-02-04T03:29:29Z

Unfortunately, in the Site Editor (media blocks), it's the only place where we show the storage info, so we can't remove it.

What's the error message you see if you run out of space and try to upload media via blocks?

fushar · 2025-02-04T04:59:27Z

What's the error message you see if you run out of space and try to upload media via blocks?

@lsl Looking at the code I think it will just show this generic message like this if this is what you're asking.

fushar · 2025-02-04T06:33:18Z

How about using the $pagenow to determine whether to hide it? Is it a good idea 🤔

I'm now thinking that we should treat this discussion as separate ticket (like the upsell message simplification). It's not really related to the upload via URL feature 🥹

arthur791004 · 2025-02-04T06:36:38Z

I'm now thinking that we should treat this discussion as separate ticket (like the upsell message simplification). It's not really related to the upload via URL feature 🥹

Make sense! I'll review this PR again, and let's iterate the UI in the follow-up PR 🙂

arthur791004

Looks good to me. Left some minor feedback 🙂

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

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

arthur791004

Tested and works as expected 👍

github-actions bot added [Package] Jetpack mu wpcom WordPress.com Features [Status] In Progress labels Jan 15, 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 Jan 15, 2025

fushar force-pushed the wpcom-media-url-import branch 2 times, most recently from 85afb83 to 24a4df4 Compare January 20, 2025 02:20

fushar changed the title ~~WIP Implement media import via URL~~ Implement upload media from URL Jan 20, 2025

fushar force-pushed the wpcom-media-url-import branch 7 times, most recently from 3f8e1cb to ba93666 Compare January 21, 2025 15:05

fushar changed the title ~~Implement upload media from URL~~ Media Library: Implement upload media from URL Jan 21, 2025

fushar marked this pull request as ready for review January 21, 2025 22:49

fushar requested review from a team and jameskoster January 21, 2025 22:49

fushar self-assigned this Jan 21, 2025

fushar removed the [Status] In Progress label Jan 21, 2025

okmttdhr previously approved these changes Jan 22, 2025

View reviewed changes

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx Outdated Show resolved Hide resolved

okmttdhr reviewed Jan 22, 2025

View reviewed changes

taipeicoder reviewed Jan 22, 2025

View reviewed changes

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx Outdated Show resolved Hide resolved

arthur791004 reviewed Jan 23, 2025

View reviewed changes

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.php Outdated Show resolved Hide resolved

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx Outdated Show resolved Hide resolved

dsas mentioned this pull request Jan 23, 2025

Media: Upload Image via URL Automattic/wp-calypso#98590

Closed

fushar force-pushed the wpcom-media-url-import branch from f6c24d0 to d37ff21 Compare January 26, 2025 13:50

okmttdhr reviewed Jan 27, 2025

View reviewed changes

...cts/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload-form/index.jsx Outdated Show resolved Hide resolved

fushar added 7 commits January 30, 2025 20:45

Media Library: allow uploading media from URL

8b7ee48

Simplify form handling

e2cdd4b

Use window.wp.media.frame.controller.browserView.collection

9aeee56

Increase gap between input field and submit button

791038d

tmp -> tmp_file

8ed9c5b

Try button as a

92ec8b9

Fix crash after we open image preview

cc6bb9f

fushar force-pushed the wpcom-media-url-import branch from d37ff21 to cc6bb9f Compare January 30, 2025 13:56

github-actions bot added the [mu wpcom Feature] Wpcom Media label Jan 30, 2025

Proposing an updated design with button

984679d

fushar force-pushed the wpcom-media-url-import branch from 1fcbc2a to 984679d Compare February 3, 2025 04:34

arthur791004 reviewed Feb 4, 2025

View reviewed changes

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

projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-upload.php Outdated Show resolved Hide resolved

Correctly consider Post and Page Editors

2042f7d

fushar mentioned this pull request Feb 5, 2025

Untangle Media: Simplify upsell message Automattic/wp-calypso#98080

Open

arthur791004 previously approved these changes Feb 5, 2025

View reviewed changes

fushar added 2 commits February 5, 2025 11:46

Simplify styles

516d678

Gate under untangling-media query param

bb1ee25

fushar dismissed arthur791004’s stale review via bb1ee25 February 5, 2025 04:49

Fix gating logic

0e5b28d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Media Library: Implement upload media from URL #41089

Media Library: Implement upload media from URL #41089

fushar commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

okmttdhr left a comment

okmttdhr Jan 22, 2025

taipeicoder commented Jan 22, 2025

arthur791004 commented Jan 23, 2025

fushar commented Jan 23, 2025

arthur791004 commented Jan 23, 2025

okmttdhr left a comment

fushar commented Jan 30, 2025

github-actions bot commented Jan 30, 2025 •

edited

Loading

fushar commented Jan 30, 2025

fushar commented Feb 3, 2025

arthur791004 commented Feb 4, 2025

lsl commented Feb 4, 2025

fushar commented Feb 4, 2025

fushar commented Feb 4, 2025

arthur791004 commented Feb 4, 2025

arthur791004 left a comment

arthur791004 left a comment


		import './style.scss';

		const WpcomMediaUrlUploadForm = ( { ajaxUrl, action, nonce, isSiteEditor } ) => {

Media Library: Implement upload media from URL #41089

Are you sure you want to change the base?

Media Library: Implement upload media from URL #41089

Conversation

fushar commented Jan 15, 2025 • edited Loading

Proposed changes:

Media Library

Site Editor

Implementation Details

Limitations

Failure Cases

Other information:

Jetpack product discussion

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

Testing instructions:

github-actions bot commented Jan 15, 2025 • edited Loading

github-actions bot commented Jan 15, 2025 • edited Loading

okmttdhr left a comment

Choose a reason for hiding this comment

okmttdhr Jan 22, 2025

Choose a reason for hiding this comment

taipeicoder commented Jan 22, 2025

arthur791004 commented Jan 23, 2025

fushar commented Jan 23, 2025

arthur791004 commented Jan 23, 2025

okmttdhr left a comment

Choose a reason for hiding this comment

fushar commented Jan 30, 2025

github-actions bot commented Jan 30, 2025 • edited Loading

Code Coverage Summary

fushar commented Jan 30, 2025

fushar commented Feb 3, 2025

arthur791004 commented Feb 4, 2025

lsl commented Feb 4, 2025

fushar commented Feb 4, 2025

fushar commented Feb 4, 2025

arthur791004 commented Feb 4, 2025

arthur791004 left a comment

Choose a reason for hiding this comment

arthur791004 left a comment

Choose a reason for hiding this comment

fushar commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 30, 2025 •

edited

Loading