Home / Questions / 41373
Accepted
Pavlo B.
Asked: 2020-12-29 09:42:14 +0800 CST 2020-12-29 09:42:14 +0800 CST

How to get the name of the selected file in an input type="file"?

  • 772

I am trying to make some type inputs fileon my website but I cannot see what it is when a file is selected, I have tried to follow the example here: https://tympanus.net/codrops/2015/09/15/styling-customizing -file-inputs-smart-way/

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
<input id="image1" type="file" class="inputfile hidden-xs hidden-md" value="image1" name="image1" required />
<label for="image1" class="my-btn btn-danger"><center>Archivo 1</center></label><br>

What I want is that when I select a file instead of putting "File 1" put the name of the file and I don't know how to do it, I have tried to copy the js code that is on that website but when I put it it stops working at all .

javascript

2 Answers

  1. Best Answer

    If what you want is simply the name of the file then you can get it directly from inputby accessing the attribute nameof the first file loaded in the input:

    document.getElementById('image1').files[0].name;

    However, if you're trying to get the path where that file is located, you can try doing this.value. However, as you can see, it returns a path that is not the real one of the file and replaces it with a fakepath. This is because for security reasons the path in which the user has the file stored is not added.

    Your modified example:

    document.getElementById('image1').onchange = function () {
  console.log(this.value);
  document.getElementById('fichero').innerHTML = document.getElementById('image1').files[0].name;
}
    .inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
    <input id="image1" type="file" class="inputfile hidden-xs hidden-md" value="image1" name="image1" required />
<label id="fichero" for="image1" class="my-btn btn-danger"><center>Archivo 1</center></label><br>

    • 8 

  2. .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
      <input id="image1" type="file" class="inputfile hidden-xs hidden-md" value="image1" name="image1" required />
 <label for="image1" class="my-btn btn-danger"><span>Archivo 1</span></label><br>
    <script>
                   '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>

    • 0