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 👍

okmttdhr · 2025-01-22T02:27:51Z

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

+			buttonText = __( 'Uploading…', 'jetpack-mu-wpcom' );
+		}
+		return (
+			<form onSubmit="return false;">


Should we change this to:

Suggested change

<form onSubmit="return false;">

<form onSubmit="handleSubmit">

with <button type='submit'>?

Oh you're right... what was I thinking 🤦 thanks!

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

taipeicoder · 2025-01-22T15:24:47Z

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

+						selection.reset();
+						selection.add( [ attachment ] );
+					} else {
+						window.wp.media.frame.content.get().collection.add( attachment );


Opening the attachment details modal updates the reference of content so collection is no longer accessible. Directly referencing window.wp.media.frame.controller.browserView.collection.add() seems to do the trick, something to consider.

Sometimes I got this error:

Thanks all for checking, looks like another session of hours debugging/exploring Core wp objects is incoming... 😅

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 😅

arthur791004 · 2025-01-23T06:17:07Z

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

+
+	$url = esc_url_raw( wp_unslash( $_POST['url'] ) );
+
+	$tmp = download_url( $url );


nit: it would be better to call it something like $tmp_file

arthur791004 · 2025-01-23T06:38:16Z

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

+						selection.reset();
+						selection.add( [ attachment ] );
+					} else {
+						window.wp.media.frame.content.get().collection.add( attachment );


Sometimes I got this error:

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 🤔

jameskoster · 2025-01-24T09:55:08Z

Maybe we can remove it

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.

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

Finally can we double-check the link color? In the videos it seems like you have the Modern admin theme selected, but the link seems to be using the blue from the default theme. In the Modern admin theme links should use the 'blueberry' blue, e.g.:

arthur791004 · 2025-01-24T11:56:37Z

BTW I found this change also affected media library

okmttdhr

I could check the visual updates 👍

okmttdhr · 2025-01-27T06:58:05Z

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

-						window.wp.media.frame.content.get().collection.add( attachment );
+						window.wp.media.frame.controller.browserView.collection.add( attachment );


(Sorry if you're still working on it)
I got TypeError: Cannot read properties of undefined (reading 'browserView') and infinite loading on the /wp-admin/upload.php page.

Screen.Recording.2025-01-27.at.15.54.39.mov

(When I reload the page, the new image is added, though...)

Oh, I could upload the image without errors only when I opened the preview modal before uploading it.

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 6 times, most recently from 3acc461 to 3f8e1cb Compare January 21, 2025 14:56

Media Library: allow uploading media from URL

ba93666

fushar force-pushed the wpcom-media-url-import branch 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

okmttdhr reviewed Jan 22, 2025

View reviewed changes

taipeicoder reviewed Jan 22, 2025

View reviewed changes

arthur791004 reviewed Jan 23, 2025

View reviewed changes

dsas mentioned this pull request Jan 23, 2025

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

Open

fushar added 3 commits January 26, 2025 20:38

Simplify form handling

3e8443b

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

a784934

Increase gap between input field and submit button

73ad0e9

fushar dismissed okmttdhr’s stale review via f6c24d0 January 26, 2025 13:46

tmp -> tmp_file

d37ff21

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

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

fushar Jan 23, 2025

okmttdhr Jan 22, 2025

taipeicoder commented Jan 22, 2025

taipeicoder Jan 22, 2025

arthur791004 Jan 23, 2025

fushar Jan 23, 2025

arthur791004 commented Jan 23, 2025

arthur791004 Jan 23, 2025

arthur791004 Jan 23, 2025

fushar commented Jan 23, 2025

arthur791004 commented Jan 23, 2025

jameskoster commented Jan 24, 2025

arthur791004 commented Jan 24, 2025

okmttdhr left a comment

okmttdhr Jan 27, 2025

okmttdhr Jan 27, 2025

	<form onSubmit="return false;">
	<form onSubmit="handleSubmit">


		import './style.scss';

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


		$url = esc_url_raw( wp_unslash( $_POST['url'] ) );

		$tmp = download_url( $url );

		window.wp.media.frame.content.get().collection.add( attachment );
		window.wp.media.frame.controller.browserView.collection.add( attachment );

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taipeicoder commented Jan 22, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arthur791004 commented Jan 23, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fushar commented Jan 23, 2025

arthur791004 commented Jan 23, 2025

jameskoster commented Jan 24, 2025

arthur791004 commented Jan 24, 2025

okmttdhr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this 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