Upload a base64 string as image to the WordPress media library

wordpress-upload-base64.php

<?php
/**
 * Save the image on the server.
 */
function save_image( $base64_img, $title ) {

	// Upload dir.
	$upload_dir  = wp_upload_dir();
	$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;

	$img             = str_replace( 'data:image/jpeg;base64,', '', $base64_img );
	$img             = str_replace( ' ', '+', $img );
	$decoded         = base64_decode( $img );
	$filename        = $title . '.jpeg';
	$file_type       = 'image/jpeg';
	$hashed_filename = md5( $filename . microtime() ) . '_' . $filename;

	// Save the image in the uploads directory.
	$upload_file = file_put_contents( $upload_path . $hashed_filename, $decoded );

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

	$attach_id = wp_insert_attachment( $attachment, $upload_dir['path'] . '/' . $hashed_filename );
}

it's a very good snippet ، i used it in my plugin T thankyou

Thank you so much for this!

Good job! works like a charm, saved my day. Thanks!

It works perfectly. The only problem for me is that WP is not aware of the uploaded file's dimensions (width & height).
To solve this just add the following to the code above, which will generate the metadata for the new attachment:

// Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
require_once( ABSPATH . 'wp-admin/includes/image.php' );
  
// Generate the metadata for the attachment, and update the database record.
$attach_data = wp_generate_attachment_metadata( $attach_id, $upload_dir['path'] . '/' . $hashed_filename );
wp_update_attachment_metadata( $attach_id, $attach_data );
  
return $attach_id;

Thank you!

Thanks a lot,

What is the best place to add the data:image/png image URL? It is also possible to acquire the link for a posted image using this code, without having to open the admin.

Thanks for the snippet. It's important to note that it only handles JPG uploads and fails silently otherwise.
A simple patch for PNG files (rough code quality, but maybe it will help someone):

$mime = substr($base64_img, 11, 4);
$mime = str_replace(';', '', $mime);
if ($mime != 'jpeg' && $mime != 'png') {
    return false;
}
$img             = str_replace( 'data:image/'.$mime.';base64,', '', $base64_img );
$img             = str_replace( ' ', '+', $img );
$decoded         = base64_decode( $img );
$filename        = $title . '.' . $mime;
$file_type       = 'image/' . $mime;

Works nice! My workflow:

`<?php
// CONVERTER BASE64 PARA IMAGEM NA BIBLIOTECA DE MIDIA
function save_image_woo_contratos( $base64_img, $title ) {

// Upload dir.
$upload_dir  = wp_upload_dir();
$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;

$img             = str_replace( 'data:image/jpeg;base64,', '', $base64_img );
$img             = str_replace( ' ', '+', $img );
$decoded         = base64_decode( $img );
$filename        = $title . '.jpeg';
$file_type       = 'image/jpeg';
$hashed_filename = md5( $filename . microtime() ) . '_' . $filename;

// Save the image in the uploads directory.
$upload_file = file_put_contents( $upload_path . $hashed_filename, $decoded );

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

$attach_id = wp_insert_attachment( $attachment, $upload_dir['path'] . '/' . $hashed_filename );

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

// Generate the metadata for the attachment, and update the database record.
$attach_data = wp_generate_attachment_metadata( $attach_id, $upload_dir['path'] . '/' . $hashed_filename );
wp_update_attachment_metadata( $attach_id, $attach_data );

return $attach_id;

} ?>`

Thank you, I have used this in my project!

Thank you you provide a good start for me .
I improve your function for using all images that are supported by WP also PNG, GIF , WEBP
The filename will be generated by WP and make sure is unique for upload_path in the way WP is doing it .
Also there is option to resize image and set max dpi

You can update yours in case you want .. so people can use it

Not tested on Windows .. in case i put the right way DIRECTORY_SEPARATOR

function uploadImage($base64_img, $title, $max_size = []) {


    // option to resize image - will save space on host usualy don't need image more than 1920 x 1080 
    // read more information on :
    // https://developer.wordpress.org/reference/functions/image_resize_dimensions/
    // https://developer.wordpress.org/reference/classes/wp_image_editor_imagick/resize/
    // or 
    // https://developer.wordpress.org/reference/classes/wp_image_editor_gd/resize/
    // crop = false 
    // or
    // crop[0] = center|left|right 
    // crop[1] = center|top|bottom 
    // 
    // also if one of "width" or "height" = 0 the image will keep ratio 
    // if "width" and "height" = 0 image will not be croped

    $max_size = array_merge([
        'width' => 0,
        'height' => 0,
        'crop' => ['center', 'center'],
        'dpi'=>96, // usualy for web is I see 72 
            ], $max_size);

    // with fix for  data:image/jpeg;charset=utf-8;base64,
    // https://en.wikipedia.org/wiki/Data_URI_scheme#Syntax
    // generate corect filename as WP 
    // extract entire data mime type ex data:image/jpeg or data:text/plain
    //
    $data_src = substr($base64_img, 0, strpos($base64_img, "base64"));
    $mime_type = substr($base64_img, 0, strpos($base64_img, ";"));

    // extract mime type ex image/jpeg or text/plain
    $mime_type = substr($mime_type, 5);

    // fix: "data: image" 
    $mime_type = str_replace(' ', '', $mime_type);

    // make sure is image/*  I make a limitation on image but you can skip this for other mime_types
    if (strpos($mime_type, 'image') === false) {
        return false;
    }

    // return extension if false return
    $ext = wp_get_default_extension_for_mime_type($mime_type);
    if (!$ext) {
        return false;
    }

    // Upload dir.
    $upload_dir = wp_upload_dir();
    $upload_path = str_replace('/', DIRECTORY_SEPARATOR, $upload_dir['path']) . DIRECTORY_SEPARATOR;

    //this is optional but you make sure you don't generate Name.jpg and also name.jpg
    $title = strtolower($title);

    // set file name and make sure is unique tile will be sanitized by WP
    $filename = $title . '.' . $ext;
    $filename = wp_unique_filename($upload_dir['path'], $filename, null);

    // get image content and decode it 
    $img_content = str_replace($data_src . 'base64,', '', $base64_img);
    $img_content = str_replace(' ', '+', $img_content);

    // decode in chunks for  large images fix
    $decoded = "";
    for ($i = 0; $i < ceil(strlen($img_content) / 256); $i++) {
        $decoded = $decoded . base64_decode(substr($img_content, $i * 256, 256));
    }
    $img_content = $decoded;

    $the_file = $upload_path . DIRECTORY_SEPARATOR . $filename;
    // Save the image in the uploads directory. 
    file_put_contents($the_file, $img_content);

    // set max DPI for jpg, png, gif, webp before any resize    
    setImageDpi($the_file, $max_size['dpi']);

    // resize image
    if (!empty($max_size['width']) || !empty($max_size['height'])) {
        $image = wp_get_image_editor($the_file); // Return an implementation that extends WP_Image_Editor
        if (!is_wp_error($image)) {
            $image->resize((int) $max_size['width'], (int) $max_size['height'], $max_size['crop']);
            $image->save($the_file);
        }
    }


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

    $attach_id = wp_insert_attachment($attachment, $upload_dir['path'] . '/' . $filename);

    // make sure function wp_generate_attachment_metadata exist
    if (!function_exists('wp_generate_attachment_metadata')) {
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
    }

    $attach_data = wp_generate_attachment_metadata($attach_id, trailingslashit($upload_dir['path']) . $filename);

    wp_update_attachment_metadata($attach_id, $attach_data);

    return $attach_id;
}

function setImageDpi($file, $dpi) {
    $orig = getimagesize($file);

    switch ($orig[2]) {
        case 1:
            $src = imagecreatefromgif($file);
            break;
        case 2:
            $src = imagecreatefromjpeg($file);
            break;
        case 3:
            $src = imagecreatefrompng($file);
            break;
        case 18:
            $src = imagecreatefromwebp($file);
            break;
        default:
            return '';
            break;
    }

    if (empty($src))
        return'';
    $res=imageresolution($src);
    $res[0]= min($res[0],$dpi);
    $res[1]= min($res[1],$dpi);
    imageresolution($src, $res[0], $res[1]);
    switch ($orig[2]) {
        case 1:
            $src = imagegif($src, $file);
            break;
        case 2:
            $src = imagejpeg($src, $file);
            break;
        case 3:
            $src = imagepng($src, $file);
            break;
        case 18:
            $src = imagewebp($src, $file);
            break;
        default:
            return '';
            break;
    }
}

Can anyone help a newbie?

Where should one put this code? on functions.php? wp-config? at a theme file?

Would that help to upload base64 images to wordpress through rest api as well?

Thakns community

if you are modifying the product API response of wooCommerce, you should handle it using woocomerce product hooks by

1. creating a class
2. init hooks in constructor
3. lastly in the method that you are calling put the snippet

that's it, have a good day mate

Thanks a lot!

thanks a lot. It works for me. I use this to handle image base64 data from API requests.

Someone tryed to do that to enable paste images on activity feed ?