Automatically get file name in input after selecting file

Question

I am doing my upload file page , and i have a page that have an <input> where the user can write a name for his file and another <input> where the user will chose a file.

What i want to do is , after the user selects a file , the input with the name to automatically get filled with the file name ( without extension ).

My html code looks like that

<div class="card-header text-center" data-background-color="rose" style="margin-left: 15px;">
     <h3 class="card-title">Upload file</h3>
</div>
<div class="card-content">
     <div class="input-group">
         <span class="input-group-addon"></span>
    
      <div class="form-group label-floating">
           <label class="control-label"><h4>Chose a name</h4></label><br>
           <input type="text" name="name" id="name" class="form-control" value="" required>
     </div>
    
     <div class="form-group label-floating">
           <label class="control-label"><h4>Choose a file</h4></label><br>
           <input type="file" id="file" name="file" required>
     </div>
</div>
</div>

And i want it to get filled right after i chose the file, as i am doing that on a object oriented programming and i can't reload the page as i have csrf. I want after i get the name , the to get filled with the name of the uploaded file.

@Jeff i am asking for a script that will do that automatically — Axwell Vail, Mar 03 '19 at 12:46
I'm afraid SO is not the right site to ask for a library/tool/software. It's to help in coding problems. — Jeff, Mar 03 '19 at 12:47
https://codepen.io/hidde/pen/LyLmrG https://www.tutorialrepublic.com/faq/how-to-get-selected-file-name-from-input-type-file-using-jquery.php — Jeff, Mar 03 '19 at 12:49
Possible duplicate of [get the filename of a fileupload in a document through javascript](https://stackoverflow.com/questions/1804745/get-the-filename-of-a-fileupload-in-a-document-through-javascript) — Jeff, Mar 03 '19 at 12:49
@Jeff i want after i get the name , the `` to be filled with it — Axwell Vail, Mar 03 '19 at 12:53

omeanwell · Accepted Answer · 2019-03-15T01:47:18.657

Adding this should do what you want, It would be easier in JQuery but as you specified javascript I kept it all pure JS.

<script>
    file.onchange = function(e) { 
        //Get the file path
        var fileName = document.getElementById("file").value; 
        //Get the filename
        var fileName2 = fileName.replace(/^.*[\\\/]/, '');
        //Remove the extension and set the input text
        document.getElementById("name").value = fileName2.replace(/\.[^/.]+$/, ""); 
    };
</script>

score 0 · Answer 2 · answered Mar 03 '19 at 13:16

I have updated your code and do let me know if need some clarification

    <div class="card-header text-center" data-background-color="rose" style="margin-left: 15px;">
         <h3 class="card-title">Upload file</h3>
    </div>
    <div class="card-content">
         <div class="input-group">
             <span class="input-group-addon"></span>
        
          <div class="form-group label-floating">
               <label class="control-label"><h4>Chose a name</h4></label><br>
               <input type="text" name="name" id="name" class="form-control" value="" required>
         </div>
        
         <div class="form-group label-floating">
               <label class="control-label"><h4>Choose a file</h4></label><br>
               <input type="file" id="file" name="file" onchange="getFileData(this);" required>
         </div>
    </div>
    </div>

<script type="text/javascript">
function getFileData(myFile){
   var file = myFile.files[0];  
   document.getElementById("name").value = file.name;
}
</script>

Automatically get file name in input after selecting file

2 Answers2