Attach File: How to show added file Name in File Field

Hey @matchurowley,

Thi seems to be more of a CSS styling issue.

Here is how you can fix it:

1. Locate and edit your main.css file.
2. Look for this rule .page-id-45 #x-section-5 .wpcf7-form input[type="file"]
3. Re-edit the CSS rule to this:

   .page-id-45 #x-section-5 .wpcf7-form input[type="file"] {
   	margin: 0;
   	padding: 0 0 0 35px;
   	height: 100%;
   	line-height: inherit;
   	left: 0;
   	z-index: 0;
   	opacity: 1;
   }

4. Save your CSS file.

This should fix the issue with file input not displaying the selected file name.

Let me know if this works for you or if you still face issues.

Hi there! Thank for helping me! PLease see the /contact page for the result. The standard button and label is now partly visible in the field. But other unwanted effects are that the field hover has gone. Also previously the label was formatted to look nice and the standard button was not visible.

The dev also uses scss when he built the site and there is an _wpcf7.scss file which is maybe also effecting it? Here is the css for from the _wpcf7.scss file:

.sjb-page .sjb-filters form,
.sjb-page .sjb-detail .jobpost-form,
.wpcf7-form {
margin: 0;

fieldset {
padding: 0;
margin: 0;
border: 0;
min-width: 0;
}

input[type=”search”] {
box-sizing: border-box;
}

input[type=”file”] {
display: block

/*
margin: 0;
padding: 0 0 0 35px;
height: 100%;
line-height: inherit;
left: 0;
z-index: 0;
opacity: 1;
*/

}

input::-ms-clear {
display: none;
}

select::-ms-expand {
display: none;
}

label {
margin: 0 0 5px;

.required {
color: inherit !important;
font-size: inherit !important;
}
}

select,
textarea,
input[type=”text”],
input[type=”password”],
input[type=”email”],
input[type=”tel”],
input[type=”search”],
.file {
display: block;
width: 100%;
outline: 0;
border: 0;
margin: 0;
padding: 15px;
height: auto;
line-height: 20px;
background-color: rgba(#ffffff, .8);
border-radius: 3px;
transition: all .2s ease;
font-size: 1em;
font-weight: normal;
font-style: normal;
color: #444444;
box-shadow: none;

&:hover,
&:focus {
background-color: #ffffff;
}
}

$input-select-icon: url(“data:image/svg+xml;charset=utf8,%3Csvg xmlns=’https://www.w3.org/2000/svg’ viewBox=’0 0 320 512’%3E%3Cpath fill=’#666′ d=’M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z’/%3E%3C/svg%3E”);

select {
padding-right: 50px;
background: rgba(#ffffff, .8) $input-select-icon no-repeat right 15px center;
background-size: 20px 20px;
-webkit-appearance: none;
}

input[type=”search”] {
-webkit-appearance: none;
}

textarea {
resize: vertical;
}
}

.wpcf7-form {
.wpcf7-form-control-wrap {
display: block;
margin-bottom: 20px;
}

.wpcf7-checkbox {
input {
margin: 3px 5px 0 0;
vertical-align: top;
}

.wpcf7-list-item-label {
display: inline-block;
margin: 0;
line-height: 20px;
vertical-align: top;
}
}
}

.sjb-page .sjb-detail .jobpost-form {
.form-group {
margin: 0 0 20px;

&:last-child {
margin-bottom: 0;
}
}

.file div {
background: #3398db;
border-radius: 3px;
font-size: 14px;
height: 40px;
padding: 10px;
line-height: 20px;
right: 5px;
top: 5px;
transition: all 0.2s ease;
}

.file:hover div {
background: darken(#3398db, 5%);
}

.app-submit {
margin: 0;
}
}

thanks again for any help.

HI @aniash_29 some extra info: i think it is more likely to be a problem with the _wpcf7.scss rather than the individual page css because the same issue exists on the other page that uses the contact form 7 on the site that can be seen here: https://rhubarbrecruitment.com/submit-cv/

• This reply was modified 6 years, 1 month ago by matchurowley.

Yes, it is indeed a problem with the way the CSS for form elements has been added. The current issue of input element showing incorrectly as you report should actually be specific to webkit browsers. Do you mind adding the following CSS and then review if the form and file input field works as desired:

.page-id-45 #x-section-5 .wpcf7-form input[type="file"] {
	margin: 0;
	padding: 10px 10px 10px 35px;
	height: 100%;
	line-height: inherit;
	left: 0;
	z-index: 0;
	opacity: 1;
}

.page-id-45 #x-section-5 .wpcf7-form input[type="file"]::-webkit-file-upload-button {
	opacity: 0;
}

Please remove the CSS rule added previously. Let me know if this works for you.

@aniash_29 you are a shining star thanks for your kind help! It is all working.

An unrelated question – i need to add some structured data to the website so that Google Jobs can pick up the job adverts on my https://rhubarbrecruitment.com/vacancies page. What needs to be added is detailed in the following links below. Would you be interested in adding this code to my site? If so pelase send me a message on the website. Best regards, Matt

https://developers.google.com/search/docs/data-types/job-posting and https://developers.google.com/search/docs/data-types/job-posting#definitions

Glad it worked! Sure, I’ll connect with you through your website. Thanks.