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=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <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>
 
 
        <!-- HTML to select the file -->
        <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>
 
    <!-- Javascript to retrieve the name of the selected file. -->
    <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>