Some problems in custom widget - php

Question

I made a custom widget for my template, which has an image upload section
For the first time, I upload an image, it displays correctly, without any problem, but when I want to change the image, it does not change, it displays the same image as before, that part of the image cannot be updated.
Thank you for your guidance
code PHP
<?php
class widget_author extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'author', // Base ID
esc_html__( 'widget_test', 'text_domain' ), // Name
array( 'description' => esc_html__( 'widget test', 'text_domain' ), ) // Args
);
}
/**
* Front-end display of the widget.
*
* #param array $args Widget arguments.
* #param array $instance Saved values from the database.
*
* #see WP_Widget::widget()
*
*/
public function widget( $args, $instance ) {
$upload_image = strip_tags($instance['upload_image']);
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
} ?>
<div class="thumb">
<?php
if ( ! empty( $instance['upload_image'] ) ) { ?>
<img src="<?php echo $upload_image; ?>"></a>
<?php } ?>
</div>
<?php
echo $args['after_widget'];
}
/**
* Back-end widget form.
*
* #param array $instance Previously saved values from the database.
*
* #see WP_Widget::form()
*
*/
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$upload_image = ! empty( $instance['upload_image'] ) ? $instance['upload_image'] : '';
?>
<!-- Title -->
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
<?php esc_attr_e( 'Widget Title:', 'text_domain' ); ?>
</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text"
value="<?php echo esc_attr( $title ); ?>">
</p>
<!-- Upload Image -->
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'upload_image' ) ); ?>">
<?php esc_attr_e( 'Image:', 'text_domain' ); ?>
</label>
<img class="<?= $this->id ?>_img" src="<?= (!empty($instance['upload_image'])) ? $instance['upload_image'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'upload_image' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'upload_image' ) ); ?>" type="text"
value="<?= $instance['upload_image'] ?? ''; ?>">
<button id="<?= $this->id ?>" class="upload_image_button button button-primary" style="margin-top: 5px;">Upload Image</button>
</p>
<?php
}
/**
* Sanitize widget form values as they are saved.
*
* #param array $new_instance Values just sent to be saved.
* #param array $old_instance Previously saved values from the database.
*
* #return array Updated safe values to be saved.
* #see WP_Widget::update()
*
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
$instance['upload_image'] = ( ! empty( $new_instance['upload_image'] ) ) ? sanitize_text_field( $new_instance['upload_image'] ) : '';
return $instance;
}
}
code java
jQuery(document).ready(function ($) {
$(document).on("click", ".upload_image_button", function (e) {
e.preventDefault();
var $button = $(this);
// Create the media frame.
var file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select or upload image',
library: { // remove these to show all
type: 'image' // specific mime
},
button: {
text: 'Select'
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function () {
// We set multiple to false so only get one image from the uploader
var attachment = file_frame.state().get('selection').first().toJSON();
$button.siblings('input').val(attachment.url);
});
// Finally, open the modal
file_frame.open();
});
});