-
Notifications
You must be signed in to change notification settings - Fork 805
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement media import via URL -- list view
- Loading branch information
Showing
8 changed files
with
213 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
projects/packages/jetpack-mu-wpcom/changelog/wpcom-media-url-import
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: added | ||
|
|
||
| Implement media import via URL |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 109 additions & 0 deletions
109
.../packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import clsx from 'clsx'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import './style.scss'; | ||
|
|
||
| const WpcomMediaUrlImportForm = ( { ajaxUrl, action, nonce } ) => { | ||
| const [ url, setUrl ] = useState( '' ); | ||
|
|
||
| const [ show, setShow ] = useState( false ); | ||
| const [ isUploading, setIsUploading ] = useState( false ); | ||
| const [ isUploaded, setIsUploaded ] = useState( false ); | ||
|
|
||
| const handleUrlChange = e => { | ||
| setUrl( e.target.value ); | ||
| }; | ||
|
|
||
| const handleSubmit = async e => { | ||
| if ( isUploading ) { | ||
| return false; | ||
| } | ||
| try { | ||
| new URL( url ); // eslint-disable-line no-new | ||
| } catch { | ||
| return false; | ||
| } | ||
| e.preventDefault(); | ||
|
|
||
| const formData = new FormData(); | ||
| formData.append( 'action', action ); | ||
| formData.append( 'image_url', url ); | ||
| formData.append( '_ajax_nonce', nonce ); | ||
|
|
||
| setIsUploading( true ); | ||
|
|
||
| const response = await fetch( ajaxUrl, { | ||
| method: 'POST', | ||
| body: formData, | ||
| } ); | ||
|
|
||
| const { success, data } = await response.json(); | ||
|
|
||
| if ( success ) { | ||
| window.wp.media.model.Attachment.get( data.attachment_id ).fetch( { | ||
| success: function ( attachment ) { | ||
| window.wp.media.frame.content.get().collection.add( attachment ); | ||
|
|
||
| setIsUploading( false ); | ||
|
|
||
| setIsUploaded( true ); | ||
| setTimeout( () => { | ||
| setIsUploaded( false ); | ||
| setUrl( '' ); | ||
| }, 2000 ); | ||
| }, | ||
| } ); | ||
| } else { | ||
| setIsUploading( false ); | ||
| // window.alert( data[ 0 ].message ); | ||
| } | ||
|
|
||
| return false; | ||
| }; | ||
|
|
||
| const renderLink = () => { | ||
| return ( | ||
| <a href="#" onClick={ () => setShow( true ) }> | ||
| { __( 'Upload from URL', 'jetpack-mu-wpcom' ) } | ||
| </a> | ||
| ); | ||
| }; | ||
|
|
||
| const renderForm = () => { | ||
| let buttonText = __( 'Upload', 'jetpack-mu-wpcom' ); | ||
| if ( isUploaded ) { | ||
| buttonText = __( 'Uploaded!', 'jetpack-mu-wpcom' ); | ||
| } else if ( isUploading ) { | ||
| buttonText = __( 'Uploading…', 'jetpack-mu-wpcom' ); | ||
| } | ||
|
|
||
| return ( | ||
| <form onSubmit="return false;"> | ||
| <input | ||
| type="url" | ||
| value={ url } | ||
| onChange={ handleUrlChange } | ||
| placeholder={ __( 'Enter media URL', 'jetpack-mu-wpcom' ) } | ||
| required | ||
| readOnly={ isUploading || isUploaded } | ||
| /> | ||
| <button | ||
| className={ clsx( 'button', 'button-primary', { | ||
| 'updating-message': isUploading, | ||
| 'updated-message': isUploaded, | ||
| } ) } | ||
| onClick={ handleSubmit } | ||
| readOnly={ isUploading } | ||
| disabled={ isUploaded } | ||
| > | ||
| { buttonText } | ||
| </button> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| return <div className="wpcom-media-url-import-form">{ show ? renderForm() : renderLink() }</div>; | ||
| }; | ||
|
|
||
| export default WpcomMediaUrlImportForm; |
7 changes: 7 additions & 0 deletions
7
...packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import-form/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .wpcom-media-url-import-form { | ||
| input { | ||
| width: 100%; | ||
| max-width: 600px; | ||
| margin-bottom: 5px; | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import WpcomMediaUrlImportForm from './wpcom-media-url-import-form'; | ||
|
|
||
| const props = typeof window === 'object' ? window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT : {}; | ||
|
|
||
| document.addEventListener( 'DOMContentLoaded', function () { | ||
| const observer = new MutationObserver( mutations => { | ||
| mutations.forEach( mutation => { | ||
| if ( mutation.addedNodes.length > 0 ) { | ||
| const container = document.getElementById( 'wpcom-media-url-import' ); | ||
| if ( container ) { | ||
| const root = ReactDOM.createRoot( container ); | ||
| root.render( <WpcomMediaUrlImportForm { ...props } /> ); | ||
| observer.disconnect(); | ||
| } | ||
| } | ||
| } ); | ||
| } ); | ||
| observer.observe( document.body, { childList: true, subtree: true } ); | ||
| } ); |
65 changes: 65 additions & 0 deletions
65
projects/packages/jetpack-mu-wpcom/src/features/wpcom-media/wpcom-media-url-import.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <?php | ||
| /** | ||
| * WordPress.com media URL import functionality. | ||
| * | ||
| * @package automattic/jetpack-mu-wpcom | ||
| */ | ||
|
|
||
| /** | ||
| * Appends the wpcom media UL import form. | ||
| */ | ||
| function wpcom_media_url_import() { | ||
| ?> | ||
| <div id="wpcom-media-url-import"></div> | ||
| <?php | ||
|
|
||
| $handle = jetpack_mu_wpcom_enqueue_assets( 'wpcom-media-url-import', array( 'js', 'css' ) ); | ||
|
|
||
| $data = wp_json_encode( | ||
| array( | ||
| 'ajaxUrl' => admin_url( 'admin-ajax.php' ), | ||
| 'action' => 'wpcom_media_url_import', | ||
| 'nonce' => wp_create_nonce( 'wpcom_media_url_import' ), | ||
| ) | ||
| ); | ||
|
|
||
| wp_add_inline_script( | ||
| $handle, | ||
| "window.JETPACK_MU_WPCOM_MEDIA_URL_IMPORT = $data;", | ||
| 'before' | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * AJAX handler for the wpcom media URL import. | ||
| */ | ||
| function wpcom_handle_media_url_import() { | ||
| check_ajax_referer( 'wpcom_media_url_import' ); | ||
|
|
||
| if ( ! isset( $_POST['image_url'] ) ) { | ||
| return; | ||
| } | ||
| $image_url = esc_url_raw( wp_unslash( $_POST['image_url'] ) ); | ||
|
|
||
| require_once JETPACK__PLUGIN_DIR . 'class.json-api-endpoints.php'; | ||
| $endpoint = new class( array() ) extends WPCOM_JSON_API_Endpoint { | ||
| // phpcs:ignore Squiz.Commenting.FunctionComment.Missing, VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable | ||
| public function callback( $path = '', $blog_id = 0 ) {} | ||
| }; | ||
|
|
||
| $result = $endpoint->handle_media_creation_v1_1( array(), array( $image_url ) ); | ||
|
|
||
| if ( count( $result['media_ids'] ) > 0 ) { | ||
| $attachment_id = $result['media_ids'][0]; | ||
| return wp_send_json_success( array( 'attachment_id' => $attachment_id ) ); | ||
| } | ||
| if ( count( $result['errors'] ) > 0 ) { | ||
| $error = $result['errors'][0]; | ||
| return wp_send_json_error( new WP_Error( $error['error'], $error['message'] ) ); | ||
| } | ||
| } | ||
|
|
||
| if ( current_user_can( 'upload_files' ) ) { | ||
| add_action( 'post-plupload-upload-ui', 'wpcom_media_url_import', 20 ); | ||
| add_action( 'wp_ajax_wpcom_media_url_import', 'wpcom_handle_media_url_import' ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters