Custom CF7 file upload form

Hello, I’m trying to customize my input file in CF7

Hello, I’m trying to customize the layout of the CF7 file upload form (input[type=”file” i]). My problem now is when I try to upload a file: I would that the string “no file selected” changes when file is uploaded. How can I change it?

Picture: https://www.dropbox.com/s/6szxq8l5g7ee8af/Screenshot%202016-07-12%2022.51.52.png?dl=0

Thanks in advance,
Toti.

PS: Below the custom code

___________My CF7 custom code___________

<div class="uploader">
    [file sand-file limit:5mb filetypes:gif|png|jpg|jpeg]
    <span class="filenamer" style="-webkit-user-select: none;">Nessun file selezionato</span>
    <span class="action" style="-webkit-user-select: none;">Seleziona Immagine</span>
</div>

___________My CSS custom code___________

.uploader {
    margin-bottom: 20px;
    height: 50px;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

span.filenamer {
    text-overflow: ellipsis;
    display: block;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    float: right;
    text-align: right;
    cursor: default;
    height: 50px;
    line-height: 50px;
    width: 200px;
    padding: 0 10px;
    color: #999;
}

span.action {
    height: 44px;
    margin: 2px;
    padding: 0 30px;
    color: #fff !important;
    font-size: 13px;
    line-height: 44px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    float: left;
    display: inline;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background: #FF7B74 !important;
}

input[type="file" i] {
    opacity: 0;
    width:100%;
    height: 100%;
    cursor: pointer;
}

div.uploader input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.wpcf7-form-control-wrap {
    position: initial;
}

Example Website page: http://it.fakelot.com/roma-folle-corsa-in-pieno-centro-fermato-mario-bianchi/

Hi

We didn’t tested file upload with CF7 and I can’t provide an accurate answer in this regard. When I’ve checked the indicated link I’ve found a js error in browser’s console: http://screencast.com/t/hiXOSasrVejT This error breaks the jQuery for CF7 and the form do not work as expected. Please make sure that you follwed the steps indicated in plugin’s documentation when you set up the shortcode: http://contactform7.com/file-uploading-and-attachment/ also try to deactivate all plugins except Visual Composer and contact form 7, clear all caches then test again.

Thanks!