Create a new post using rest api and save featured image using an external image url

I am trying to create a post using the rest API. Which I am able to do with a fetch request as below. OurPostData contains the title, content and URL of a featured image which is an external url

  fetch('https://mywebste.online/wp-json/wp/v2/post', {
      method: 'POST',
      credentials: 'same-origin',
      headers: new Headers({
        'Content-Type': 'application/json;charset=UTF-8',
        'X-WP-Nonce': qrAjax.nonce
      }),
      body: JSON.stringify(OurPostData),
    }).then(response => {
      console.log(response);
      return response.json();
    }).then(data => console.log(data));
  });

This works except for the featured image. If I am able to do pass it to the callback function done using the below code may be I can achieve that?

add_action('wp_ajax_code_post_create', 'code_post_create_callback');

But I don’t know how to pass it. The data in my code has the post id. ( How can I access it in code_post_create_callback?)

I can save the file using below

$file = 'https://externalwebsite.com/image.jpg';
      $file_array  = [ 'name' => wp_basename( $file ), 'tmp_name' => download_url( $file ) ];

      // If error storing temporarily, return the error.
        if ( is_wp_error( $file_array['tmp_name'] ) ) {
            return $file_array['tmp_name'];
        }

        // Do the validation and storage stuff.
        require_once ('wp-load.php');
        require_once ('wp-admin/includes/admin.php');
        $id = media_handle_sideload( $file_array, 0, $desc );
        //var_dump($id);
        // If error storing permanently, unlink.
        if ( is_wp_error( $id ) ) {
            @unlink( $file_array['tmp_name'] );
            return $id;
        }

How do I call code_post_create_callback? How do I access the data in this callback?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Instead of using wp_ajax_ (i.e. admin-ajax.php), how about adding a custom REST API field and then using its update_callback, download the remote image and set it as the post featured image?

Working Example

add_action( 'rest_api_init', 'wpse_381217' );
function wpse_381217() {
    register_rest_field( 'post', 'featured_image_url', array(
        // If you don't want to expose the field in the REST API response, you
        // may ignore the get_callback, i.e. don't set it.
        'get_callback'    => function ( $post_arr ) {
            return get_the_post_thumbnail_url( $post_arr['id'], 'full' );
        },

        'update_callback' => function ( $url, $post_obj ) {
            $file_array = array(
                'name'     => wp_basename( $url ),
                'tmp_name' => download_url( $url ),
            );

            if ( is_wp_error( $file_array['tmp_name'] ) ) {
                return false;
            }

            $id = media_handle_sideload( $file_array, 0 );

            if ( is_wp_error( $id ) ) {
                @unlink( $file_array['tmp_name'] );
                return false;
            }

            return set_post_thumbnail( $post_obj->ID, $id );
        },

        'schema'          => array(
            'description' => 'Featured image URL.',
            'type'        => 'string',
        ),
    ) );
}

Then, in your OurPostData variable, add the featured image URL with the name featured_image_url. E.g.

const OurPostData = {
    title: 'testing featured_image_url',
    featured_image_url: 'https://example.com/image.png',
    // ...
};

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0