Upload image using WordPress media uploader

form.php

<form method="POST">
    <div class="form-row">
        <label>Name</label>
        <input type="text" placeholder="Enter name">
    <div>
    <div class="form-row">
        <?php 
        $key = 'profile_picture';
        $placeholder = 'https://placehold.it/150x150?text=IMG';
        $current_value = get_user_meta(get_current_user_id(), $key, true);
        ?>
        <label for='<?php echo $key; ?>'>Upload image</label>
        <?php dg_custom_upload_field( $key, $current_value, $placeholder ); ?>
    <div>  
</form>  

handler.php

<?php
// Saves the form
function dg_save_user_form() {
    $current_user_id = get_current_user_id();
    if(!empty($_POST) && isset($_POST['profile_picture']) {
      update_user_meta('profile_picture', $current_user_id, $_POST['profile_picture']); 
    }
}
add_action('init', 'dg_save_user_form', 1000);

helpers.php

<?php

/**
 * Custom image upload field
 * @param $key
 * @param $current_value
 * @param $placeholder
 */
function dg_custom_upload_field( $key, $current_value, $placeholder = '' ) {

	$media_id = $current_value;
	if ( ! empty( $media_id ) && is_numeric( $media_id ) ) {
		$current_src = wp_get_attachment_image_src( $media_id, 'thumbnail' );
		$current_src = $current_src[0];
	} else {
		$current_src = $placeholder;
		$media_id    = '';
	}
	?>
    <div class="upload">
        <img data-src="<?php echo $placeholder; ?>" src="<?php echo $current_src; ?>" width="120px"/>
        <div>
            <input type="hidden" name="<?php echo $key; ?>" id="<?php echo $key; ?>" value="<?php echo $media_id; ?>"/>
            <button type="submit" class="upload_image_button button">Upload</button>
            <button type="submit" class="remove_image_button button">&times;</button>
        </div>
    </div>
	<?php
}

hooks.php

<?php

/**
 * Enqueue media libraries.
 * @return void
 */
function dg_enqueue_scripts() {
   wp_enqueue_media();
}
add_action('wp_enqueue_scripts', 'dg_enqueue_scripts'); // or admin_enqueue_scripts


/**
 * Add the required javascript
 * @return void
 */
function dg_footer_scripts() {
	?>
    <script>
        (function($){
            // The "Upload" button
            $(document).on('click', '.upload_image_button', function() {
                var send_attachment_bkp = wp.media.editor.send.attachment;
                var button = $(this);
                wp.media.editor.send.attachment = function(props, attachment) {
                    $(button).parent().prev().attr('src', attachment.url);
                    $(button).prev().val(attachment.id);
                    wp.media.editor.send.attachment = send_attachment_bkp;
                };
                wp.media.editor.open(button);
                return false;
            });
            // The "Remove" button (remove the value from input type='hidden')
            $(document).on('click', '.remove_image_button', function() {
                var answer = confirm('Are you sure?');
                if (answer) {
                    var src = $(this).parent().prev().attr('data-src');
                    $(this).parent().prev().attr('src', src);
                    $(this).prev().prev().val('');
                }
                return false;
            });
        })(jQuery);
    </script>
<?php
}
add_action( 'wp_footer', 'dg_footer_scripts', 5000 ); // or admin_footer