"Anirudha Bhowmik uplopad file and show name"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form> <input type="file" id="file-upload" multiple required /> <label for="file-upload">Upload file</label> <div id="file-upload-filename"></div> </form>
input[type="file"] { z-index: -1; position: absolute; opacity: 0; } input:focus + label { outline: 2px solid; }
var input = document.getElementById( 'file-upload' ); var infoArea = document.getElementById( 'file-upload-filename' ); input.addEventListener( 'change', showFileName ); function showFileName( event ) { // the change event gives us the input it occurred in var input = event.srcElement; // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here. var fileName = input.files[0].name; // use fileName however fits your app best, i.e. add it into a div infoArea.textContent = 'File name: ' + fileName; }

Related: See More


Questions / Comments: