Remove "No image selected" text from image uploader

• krishaamer

• January 29, 2016 at 12:51 am

Hello,

I need to remove the “No image selected” placeholder from the image uploader. As the text has no useful element around it to target with JS/CSS (just view.hide-if-value p), how can I remove it without also touching the upload acf-button inside the same element?

Thanks,
Kris

• James

• January 29, 2016 at 5:37 pm

Hi @krishaamer

Maybe you can use this code:

function my_acf_admin_footer() {
	
	?>

	<script type="text/javascript">
	(function($){
        $( document ).ready(function() {
            $(".acf-image-uploader p").each(function(){
                $(this).replaceWith($(this).html().replace("No image selected", ""));
            });
        });
	})(jQuery);
	</script>
	<?php
	
}

add_action('acf/input/admin_footer', 'my_acf_admin_footer');

I hope this helps.

• krishaamer

• January 29, 2016 at 8:10 pm

Thanks James, this works perfectly. I hope in the future though ACF will have a template system so we could customize before render. #FeatureRequest.

Cheers,
Kris

• timjuedemann

• August 20, 2022 at 2:46 pm

I was facing the same issue and came up with this more robust CSS-based solution which targets the relevant CSS class and will work across possible translations of the “No image selected”-string.

.hide-if-value :not(a) {
    font-size: 0px;
    color: transparent;
}

This selector can optionally be prepended with the .acf-image-uploader or .acf-file-uploader selector in case you want to target these fields specifically.