Widget Development – Updating not working for image field

Hi all,

I have been working on the development of my very first plugin, and am having a little difficulty when saving a value being posted by the form.

I have created a widget with 3 inputs/options; Title, Textarea & Image Upload Image.

My first two fields ‘Title’ and ‘Textarea’ are working a treat. The user can add these from the widget form and click save, the relevant form inputs are then updated with the values the user has submitted and the front end displays those when the widget is used.

My last and most important input ‘Image Upload’ is doing great, it uses the wordpress image upload iframe to allow users to add an image to the input. After a user selects their image the ‘Upload Image’ input is correctly populated with the image URL.

BUT, when the users hits ‘Save’ to submit the widget form, the url that previously populated the Upload Image input field turns blank and the front end does not display my image.

I believe the problem lies in the update function, here specifically… $instance['upload_image'] = $new_instance['upload_image'];

I have attempted using the following in the assumption that the form is using a POST method to submit, but of course I had no luck (that’s why I’m here :D)

$instance['upload_image'] = $_POST['upload_image'];

Brownie points for anyone that can support me on this, I am fairly new to all this and any info on what I am doing wrongly will be of massive help.

Cheers

Matt

<?php

//Register Rollover Widget

add_action( 'widgets_init', function(){
     register_widget( 'Rollover_Widget' );
});

class Rollover_Widget extends WP_Widget {

	/**
	 * Register widget with WordPress.
	 */

	function Rollover_Widget() {
		/* Widget settings. */
		$widget_ops = array( 'classname' => 'rollover', 'description' => 'A rollover widget' );

		/* Widget control settings. */
		$control_ops = array( 'width' => 200, 'height' => 350, 'id_base' => 'rollover-widget' );

		/* Create the widget. */
		$this->WP_Widget( 'rollover-widget', 'Rollover Widget', $widget_ops, $control_ops );
	}

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */

	public function widget( $args, $instance ) {
		extract( $args );

		//widget options
		$title = apply_filters( 'widget_title', $instance['title'] );
		$textarea = apply_filters( 'rollover_text', $instance['textarea']);
		$upload_image = apply_filters( 'upload_image', $instance['upload_image']);

		echo $before_widget;

		if ( ! empty( $title ) );
		if ( ! empty( $textarea ) );
		if ( ! empty( $upload_image ) );

		echo '<a href="#">
			<img src="'.esc_url($instance['upload_image']).'"/>
			<h4>'.esc_html($instance['upload_image']).'</h4>
			</a>';

		//if the title is set, display the title.
		if ( $title ) {
			echo $before_title . $title . $after_title;
		}
		//if the rollover text is set, enable the rollover using the textarea text.
		if ( $textarea ) {
			echo '<div class="rollover-text">' .$textarea. '</div>';
		}
		//if an image is attached. Show the image.
		if ( $upload_image ) {
		echo '<div class="rollover-text">' .$upload_image. '</div>';
		}

		/*
		query_posts('cat=2');
		if (have_posts()) :
			echo "<ul>";
			while (have_posts()) : the_post();
			echo "<li>".the_title()."</li>";
			echo "<p>".the_content()."</p>";
			echo the_post_thumbnail();
			endwhile;
			echo "</ul>";
		endif;
		wp_reset_query();
		*/

		echo $after_widget;
	}

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */

	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['textarea'] = strip_tags( $new_instance['textarea'] );
		$instance['upload_image'] = $new_instance['upload_image'];

		return $instance;
	}

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */

	public function form( $instance ) {

		$defaults = array( 'title' => 'Enter a title', 'textarea' => 'Messy text', 'upload_image' => 'browse for an image');
		$instance = wp_parse_args( (array) $instance, $defaults );

		wp_enqueue_script('jquery'); // include jQuery
     		wp_register_script('my-upload', plugins_url('rollover-widget/script.js'), array('jquery','media-upload','thickbox'));
     		wp_enqueue_script('my-upload');  // include script.js
		wp_enqueue_script('thickbox');
  	       wp_enqueue_script('media-upload');  

		wp_enqueue_style('thickbox');  

		if ( isset( $instance[ 'title' ] ) ) {
			$title = esc_attr($instance[ 'title' ]);
		}
		else {
			$title = __( 'New title', 'text_domain' );
		}

		$textarea = esc_attr($instance['textarea']);
		$upload_image = esc_attr($instance['upload_image']);
		$upload_image_button = esc_attr($instance['upload_image_button']);
		$jspass = array('jspass' => $this->get_field_id($instance['upload_image']));
		wp_localize_script('my-upload', 'php_data', $jspass);	

		?>

		<p>
		<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
		<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		</p>
		<p>
		<label for="<?php echo $this->get_field_id( 'textarea' ); ?>"><?php _e( 'Rollover Text:' ); ?></label>
		<textarea class="widefat" rows="8" cols="50" id="<?php echo $this->get_field_id( 'textarea' ); ?>" name="<?php echo $this->get_field_name( 'textarea' ); ?>" type="textarea"><?php echo esc_attr( $textarea ); ?></textarea>
		</p>
		<p>
		<label for="upload_image"><?php _e( 'Upload Image:' ); ?></label>
          	<input id="upload_image" class="img" name="<?php echo $this->get_field_id( 'upload_image' ); ?>" type="text" size="36" name="<?php echo $this->get_field_name( 'upload_image' ); ?>" value="<?php echo esc_attr( $upload_image ); ?>" />

              <input id="upload_image_button" class="select_image" type="button" class="button" value="Upload Image" />          	

		<br />Enter a URL or upload an image.
          	</label>

		<?php 

	}

} // class Rollover_Widget