Using #states API with an image field as a control field On a form, is it possible to use #states to hide/show a field based on whether or not an image field has been filled in?

More specifically, I'd like to get this node form:



to only show the "Show featured image" checkbox if an image has been added. If it matters, I'm using the media browser widget for the image field.

I tried using #states, but it doesn't seem to work here. I had the following code in a hook_form_alter function, but adding an image didn't make field_image_show show up.

// Hide the "show featured image" field until a featured image is added.
if (isset($form['field_image_show'])) {
  $langcode = $form['field_image']['#language'];
  $form['field_image_show']['#states'] = array(
    'visible' =&gt; array(
      ':input[name="media[field_image_und_0]"]' =&gt; array('filled' =&gt; true),
    ),
  );
}


If it's not possible with #states, any idea how to handle it with custom JS? I tried the following JS, but it also didn't work.

$field_image_show = $('#edit-field-image-show');

var imageCheck = function() {
  if ($('#edit-field-image-und-0 .preview').is(':empty')) {
    $field_image_show.hide();
  }
  else {
    $field_image_show.show();
  }
}

// Check on initial page load.
imageCheck();

// Check when media browser does stuff.
// @nope This doesn't seem to actually ever fire.
$('#edit-field-image-und-0 input').change(function() {
  imageCheck();
});
You should be able to do it with #states just fine. Maybe double check your input name or try something a little different depending on what the html for that element looks like. This is the code I am using that works.

 $form['field_hero_image']['#states'] = array(
  'visible' =&gt; array(
    ':input[name="field_image[und][0][fid]"]' =&gt; array('empty' =&gt; true),
  ),
);


This causes it to only appear if there is no value for the input fid. Pertinent HTML:

&lt;input type="hidden" name="field_image[und][0][fid]" value="1088"&gt;
&lt;input type="hidden" name="field_image[und][0][display]" value="1"&gt;
&lt;input type="hidden" name="field_image[und][0][width]" value="915"&gt;
&lt;input type="hidden" name="field_image[und][0][height]" value="450"&gt;


Note: 

'visible' =&gt; array(
    ':input[name="field_image[und][0][fid]"]' =&gt; array('value' =&gt; 0),
  ),


may work just as well (untested)