Bootstrap Snippet Anirudha Bhowmik uplopad file and show name using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
input[type="file"] { 
  z-index: -1;
  position: absolute;
  opacity: 0;
}
input:focus + label {
  outline: 2px solid;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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