Bulma File with JavaScript
Last Updated :
21 Feb, 2022
Bulma is a free and open-source CSS framework that can be used as an alternative to Bootstrap. It comes with pre-built components like buttons and icons. In this article, we will be seeing how to retrieve the name of the file selected using the file upload input using JavaScript.
To retrieve the file name of the selected file we will attach an onChange listener to the file upload input and whenever the onChange event fires, we check if any file is selected, and if a file is selected we retrieve its name and change the text of the name container to the name of the file.
Example: The below example shows how to get the name of the selected file using JavaScript.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = 'stylesheet'
href =
< link rel = "stylesheet"
href =
< style >
h1,
p {
text-align: center;
}
.container>div{
margin-top: 25px;
}
</ style >
</ head >
< body >
< div class = "container" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ h1 >
< p >< b >Bulma File with JavaScript</ b ></ p >
< div id = "file-with-js"
class = "file has-name is-centered is-link" >
< label class = "file-label" >
< input class = "file-input"
type = "file" name = "selected-image" >
< span class = "file-cta" >
< span class = "file-icon" >
< i class = "fas fa-upload" ></ i >
</ span >
< span class = "file-label" >
Select an Image..
</ span >
</ span >
< span class = "file-name" >
No Image Selected
</ span >
</ label >
</ div >
</ div >
< script >
// Select the input element using
// document.querySelector
var input = document.querySelector(
"#file-with-js>.file-label>.file-input"
);
// Bind an listener to onChange event of the input
input.onchange = function () {
if(input.files.length > 0){
var fileNameContainer =
document.querySelector(
"#file-with-js>.file-label>.file-name"
);
// set the inner text of fileNameContainer
// to the name of the file
fileNameContainer.textContent =
input.files[0].name;
}
}
</ script >
</ body >
</ html >
|
Output:
Bulma File with JavaScript
Reference: https://bulma.io/documentation/form/file/#javascript
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...