Contact Form 7 - How to Style Button AND include which file was uploaded

[birdiegolden]

Hello, There was a post made on this form (that has now been closed so I cannot post this followup question) which did an awesome job at detailing how to modify the Uploads button for file uploading with Contact Form 7.

While this worked to update the button style, it removed the “which file was uploaded” indicator, so there’s nothing that really let’s the user know their file was uploaded, much less which file(s).

Original Post: https://www.sitepoint.com/community/t/how-to-style-choose-file-button-in-contact-form7/202387/3

Website: https://birdandbails.com/request-a-quote/

Can anyone advise on how to change the styles like in this demo, while retaining the upload information?

Thank you!

[m_hutley]

I’ll be honest, I gave up trying to look through your source code after digging through the 20th layer of DIV tag, because your site very annoyingly disables right clicking.

Identify the element that changes that shouldn’t.

[birdiegolden]

Ah, yes. It’s a website that sells artwork, which is why the right click is disabled, to prevent Hot links or piracy, as they’re higher resolution images. Glad to know it works though.

I’ve disabled it temporarily, if you get another chance to crack at it let me know. I appreciate the second pair of eyes.

[m_hutley]

Okay, I see what’s being done now.

What exactly would the desired outcome be?

[birdiegolden]

Excellent, so here’s what I’m trying to accomplish (unsuccessfully).

I would like the button style that is shown in the teal section (big white button), but when someone uploads a file, I would like them to see the file they uploaded as you can with the second upload/unstyled button just below it.

Currently, both of these upload buttons work, but only one shows you what you’ve uploaded.

The one that shows you what you uploaded cannot be styled.
The one that can be styled doesn’t show you what you uploaded.

Thanks!

[m_hutley]

I’m going to suggest that a method of doing so involves a bit of Javascript.

For complete clarity, i’m going to lift the inspiration for this answer with some modification from this website, specifically the “Javascript Enhancement” section.

Note that this script has been modified to accomodate Wordpress’… interesting implementation of jQuery.

<script>
jQuery('input[name="UploadanImage"]').change(function(e) {
  if (this.value != "") {
     jQuery('.cv').attr('data-btntxt',this.value.split('\\').pop());
  } else {
    jQuery('.cv').attr('data-btntxt',"Upload file");
  }
});
</script>

also to modify your CSS for span.cv::before to reference instead content: attr(data-btntxt) and add a default attribute to your span such that it reads <span class="cv" data-btntxt="Upload file">

[birdiegolden]

Thank you for your reply. Your code looks legit, but I couldn’t get it working for some reason. I DID get this working though, and figured I would post it in case anyone runs into a similar question.

Thanks again for the assist!

jQuery(document).ready(function(){

	jQuery('input[type="file"]').change(function(e){

		var fileName = e.target.files[0].name;

		$(".the-file").append("<b>" + fileName + "</b>");			

	});	

});

[m_hutley]

Be careful with that code - if you load a file and then change files, you’ll leave the old file name behind. You may want to use .html() instead of .append().

[birdiegolden]

@m_hutley

.html()

Good point!