Images uploaded on frontend display correctly but not in media editor.

Question

        if ($_FILES) {

            $uploaddir = wp_upload_dir();

            $file = $_FILES[featured_image];

            $uploadfile = $uploaddir['path'] . '/' . basename( $file['name'] );

            move_uploaded_file( $file['tmp_name'] , $uploadfile );

            $filename = basename( $uploadfile );

            $wp_filetype = wp_check_filetype(basename($filename), null );

            $attachment = array(
                'post_mime_type' => $wp_filetype['type'],
                'post_title'     => preg_replace('/\.[^.]+$/', '', $filename),
                'post_content'   => '',
                'post_status'    => 'inherit',
                'menu_order'     => $_i + 1000
            );

            $attach_id = wp_insert_attachment( $attachment, $uploadfile );

            // Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');

            // Generate the metadata for the attachment, and update the database record.
            $attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
            wp_update_attachment_metadata( $attach_id, $attach_data );

            set_post_thumbnail( $new_job_id, $attach_id );

        }

The images upload correctly and are set to the featured image for the selected post. The images also display like normal (except can only show full image size, can't load thumbnail size.) but in the media library on the backend the images are displayed as a page with a folded corner and you can't see the actual image.

What am I doing wrong here?

Answer 1

It appears you've taken the super long winded route and done each step of the upload manually.

But why not use the sideloading function that does it all for you? The majority of your code can be replaced with this:

// 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' );

$attach_id = media_handle_upload( 'featured_image', $new_job_id );
if ( is_wp_error( $attach_id ) ) {
    // There was an error uploading the image.
} else {
    // The image was uploaded successfully!
}

From there you can set your post thumbnail etc, look up the documentation for media_handle_upload for more details, and remember to add a nonce check to your uploader or your site will probably get hacked

Answer 2

        if ($_FILES) {

            // Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
            require_once(ABSPATH . "wp-admin" . '/includes/file.php');
            require_once(ABSPATH . "wp-admin" . '/includes/media.php');

            $uploaddir = wp_upload_dir();

            $file = $_FILES[featured_image];

            $file_return = wp_handle_upload( $file, array('action' => 'tm_add_new_job' ) );

            if( isset( $file_return['error'] ) || isset( $file_return['upload_error_handler'] ) ) {

              return false;

            } else {

                $filename = $file_return['file'];

                $attachment = array(
                    'post_mime_type' => $file_return['type'],
                    'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
                    'post_content'   => '',
                    'post_status'    => 'inherit',
                    'guid' => $file_return['url']
                );

                $attachment_id = wp_insert_attachment( $attachment, $file_return['url'] );

                // Generate the metadata for the attachment, and update the database record.
                $attachment_data = wp_generate_attachment_metadata( $attachment_id, $filename );
                wp_update_attachment_metadata( $attachment_id, $attachment_data );

                set_post_thumbnail( $new_job_id, $attachment_id );

            }

        }