Skip to content

Instantly share code, notes, and snippets.

@mushfiqweb
Last active May 3, 2017 21:58
Show Gist options
  • Select an option

  • Save mushfiqweb/1a20d2df2af8ea46e48e1c5b2afe57f5 to your computer and use it in GitHub Desktop.

Select an option

Save mushfiqweb/1a20d2df2af8ea46e48e1c5b2afe57f5 to your computer and use it in GitHub Desktop.
<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
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;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment