Intégration Custom Input File

Bonjour,
J'utilise wordpress, et j'aimerai configuré un bouton de type:file. J'ai suivis un petit tuto avec http://tympanus.net/codrops/2015/09/...uts-smart-way/.
Tout fonctionne parfaitement, j'ai juste un problème pour l'affichage du nom du fichier sélectionné (le nom du fichier remplace pas le texte entre la balise span). Donc surement un soucis avec la partie JS que je ne comprend pas très bien, je l'avoue que j'ai juste fait un copier coller.
Le code JS est directement intégré dans la page pour être sûr que j'ai pas de problème avec le lien de direction vers le fichier.
Je pense plutôt que çà doit être un problème du côté de la ligne

Code:

fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );

Mais je comprend pas trop cette ligne. Si quelqu'un peut m'éclairer, ce serrai sympas ^^

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
 
<script type="text/javascript">
'use strict';
 
;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.inputfile' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label	 = input.nextElementSibling,
		labelVal = label.innerHTML;
 
		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\\' ).pop();
 
			if( fileName )
				label.querySelector( 'span' ).innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});
 
		// Firefox bug fix
		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
	});
}
( document, window, 0 ));
</script>

La partie du formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input class="form-control <?php if ( ! empty( $errors ) ) : ?>field-error-input<?php endif; ?> field-input inputfile inputfile-1" 
<?php if ( ! empty( $required ) ) : ?>required aria-required="true"<?php endif; ?> 
type="file" 
name="file-1[]"
id="ccf_field_<?php echo esc_attr( $slug ); ?>"
placeholder="<?php echo esc_attr( $placeholder ); ?>" 
value="<?php if ( ! empty( $post_value ) ) { echo esc_attr( $post_value ); } else { echo esc_attr( $value ); } ?>" 
accept="<?php echo esc_attr( preg_replace( '/([^,\s]+)/', '.$1', $file_extensions ) ); ?>"
data-multiple-caption="{count} files selected">
 
<label for="ccf_field_<?php echo esc_attr( $slug ); ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" >
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> 
<span>Choose a file…</span>
<?php if ( ! empty( $required ) ) : ?><?php endif; ?>
</label>

Le code CSS, n'est pas utile pour mon problème.

Merci d'avance pour votre aide. :)