AJAX image upload with a upload progress bar using media_handle_upload

I currently have post image upload for the featured image from front-end form.

<input type="file" name="wh_image_upload" id="wh_image_upload" multiple="false" />

and using media_handle_upload to upload the file.

 // These files need to be included as dependencies when on the front end.
 require_once( ABSPATH . 'wp-admin/includes/image.php' );
 require_once( ABSPATH . 'wp-admin/includes/file.php' );
 require_once( ABSPATH . 'wp-admin/includes/media.php' );

  // Let WordPress handle the upload.
  $attachment_id = media_handle_upload( 'wh_image_upload', $post_id );
  if ( !is_wp_error( $attachment_id ) ) {
      // If the image was uploaded successfully, set it as featured image
      set_post_thumbnail( $post_id, $attachment_id );
  }

What is the best way to convert this to AJAX image upload with a uploading progress bar?

Update

This is what I want it to be working.

enter image description here

0

Leave a Comment