Open In App

Bulma | File

Last Updated : 10 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.  

The file element is used to upload custom file input. The ‘file’ component comprises of several sub-elements that we have to add exclusively to design our content well. These elements are listed below.

    • file-label – It is the actual interactive and clickable part of the file element.

      • file-input – It is the native file input, hidden for styling purposes.
      • file-cta – It is the upload call-to-action.
        • file-icon- It is  an optional upload icon
        • file-label –  the “Choose a file…” text
      • file-name – a container for the chosen file name.

    Example 1: This example shows simple Bulma file input.




    <!DOCTYPE html>
    <html>
      <head>
        <title>Bulma File</title>
        <link rel='stylesheet' 
              href=
    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
        <!-- custom css -->
        <style>
          div.columns{
            margin-top: 100px;
          }
        </style>
      </head>
      <body>
        <!-- font-awesome cdn -->
        <script src=
    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
         </script>   
        <div class='container'>
          <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
              <div class="file">
                <label class="file-label">
                  <input class="file-input" 
                         type="file" 
                         name="image">
                  <span class="file-cta">
                    <span class="file-icon">
                      <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                      Choose a file…
                    </span>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    		 

    

    

    
                        
    

    

    

    

    Output:
    

    Simple File Input
    

    Example 2: This example shows file input with selected file name wrapped in a box container.
    

    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <title>Bulma File</title> 
    

        <link rel='stylesheet' 
    

              href= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 
    

        <!-- custom css -->
    

        <style> 
    

          div.columns{ 
    

            margin-top: 100px; 
    

          } 
    

        </style> 
    

      </head> 
    

      <body> 
    

        <!-- font-awesome cdn -->
    

        <script src= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 
    

        </script>    
    

        <div class='container'> 
    

          <div class='columns is-mobile is-centered'> 
    

            <div class='column is-5'> 
    

              <div class="file has-name"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

            </div> 
    

          </div> 
    

        </div> 
    

      </body> 
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    Output:
    

    File input with selected file name
    

    Example 3: This example shows file input and selected file name  with different alignment.
    

    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <title>Bulma File</title> 
    

        <link rel='stylesheet' 
    

              href= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 
    

        <!-- custom css -->
    

        <style> 
    

          div.columns{ 
    

            margin-top: 100px; 
    

          } 
    

      
    

          div.file{ 
    

            margin-bottom: 15px; 
    

          } 
    

      
    

        .file.is-right { 
    

          justify-content:flex-start; 
    

        } 
    

        </style> 
    

      </head> 
    

      <body> 
    

        <!-- font-awesome cdn -->
    

        <script src= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 
    

            </script>    
    

        <div class='container'> 
    

          <div class='columns is-mobile is-centered'> 
    

            <div class='column is-5'> 
    

              <div class="file has-name"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-right"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

            </div> 
    

          </div> 
    

        </div> 
    

      </body> 
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    Output:
    

    Different alignment file input
    

    Example 4: This example shows different color file inputs.
    

    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <title>Bulma File</title> 
    

        <link rel='stylesheet'
    

              href= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 
    

        <!-- custom css -->
    

        <style> 
    

          div.columns{ 
    

            margin-top: 100px; 
    

          } 
    

      
    

          div.file{ 
    

            margin-bottom: 15px; 
    

          } 
    

      
    

        .file.is-right { 
    

          justify-content:flex-start; 
    

        } 
    

        </style> 
    

      </head> 
    

      <body> 
    

        <!-- font-awesome cdn -->
    

        <script src= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 
    

         </script>    
    

        <div class='container'> 
    

          <div class='columns is-mobile is-centered'> 
    

            <div class='column is-5'> 
    

              <div class="file has-name is-primary"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-link"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" 
    

                          name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-info"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                          type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-success"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                         type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-warning"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                         type="file" 
    

                          name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-danger"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose a file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

            </div> 
    

          </div> 
    

        </div> 
    

      </body> 
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    Output:
    

    Different color file inputs
    

    Example 5: This example shows different sizes file input.
    

    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <title>Bulma File</title> 
    

        <link rel='stylesheet' 
    

              href= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 
    

        <!-- custom css -->
    

        <style> 
    

          div.columns{ 
    

            margin-top: 100px; 
    

          } 
    

      
    

          div.file{ 
    

            margin-bottom: 15px; 
    

          } 
    

      
    

        .file.is-right { 
    

          justify-content:flex-start; 
    

        } 
    

        </style> 
    

      </head> 
    

      <body> 
    

        <!-- font-awesome cdn -->
    

        <script src= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 
    

         </script>    
    

        <div class='container'> 
    

          <div class='columns is-mobile is-centered'> 
    

            <div class='column is-6'> 
    

              <div class="file has-name is-small"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                          type="file" 
    

                          name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Small file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Normal file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-medium"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                         type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Medium file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-large"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                          type="file" 
    

                         name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Large file… 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

            </div> 
    

          </div> 
    

        </div> 
    

      </body> 
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    Output:
    

    Different sizes file input
    

    Example 6: This example shows boxed-block input
    

    

    

    

    

    
                                    
    

    

                                        
    
                                    
    

    

                                        
    

    

                                        
    
                                    
    
                                    
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

      <head> 
    

        <title>Bulma File</title> 
    

        <link rel='stylesheet' 
    

              href= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 
    

        <!-- custom css -->
    

        <style> 
    

          div.columns{ 
    

            margin-top: 100px; 
    

          } 
    

      
    

          div.file{ 
    

            margin-bottom: 15px; 
    

          } 
    

      
    

        </style> 
    

      </head> 
    

      <body> 
    

        <!-- font-awesome cdn -->
    

        <script src= 
    

    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 
    

        </script>    
    

        <div class='container'> 
    

          <div class='columns is-mobile is-centered'> 
    

            <div class='column is-3'> 
    

              <div class="file has-name is-boxed is-primary"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-boxed is-link"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

              
    

      
    

              <div class="file has-name is-boxed is-info"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

            </div> 
    

      
    

            <div class='column is-3'> 
    

              <div class="file has-name is-boxed is-success"> 
    

                <label class="file-label"> 
    

                  <input class="file-input" 
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-boxed is-warning"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

      
    

              <div class="file has-name is-boxed is-danger"> 
    

                <label class="file-label"> 
    

                  <input class="file-input"
    

                         type="file" name="image"> 
    

                  <span class="file-cta"> 
    

                    <span class="file-icon"> 
    

                      <i class="fas fa-upload"></i> 
    

                    </span> 
    

                    <span class="file-label"> 
    

                      Choose file... 
    

                    </span> 
    

                  </span> 
    

                  <span class="file-name"> 
    

                    Nature-at-its-best.png 
    

                  </span> 
    

                </label> 
    

              </div> 
    

                
    

            </div> 
    

          </div> 
    

        </div> 
    

      </body> 
    

    </html>
    

    
    		

    
    

    

    

    

    

    

    
                        
    

    

    

    
                        
    

    

    

    

    Output:
    

    boxed-block input
    

                                     

    
                            
    
                                
    
                                    Like Article
                                    
                                
    
                                
    
                                    
                                    Suggest improvement
                                
    
                            
    

                            
    
                                                            
    
                                    
                                        
                                        Previous
                                    
                                    
                                    
    
                                        Bulma Radio
                                    
    
                                
    
                                                            
    
                                    
                                        Next
                                        
                                    
                                    
                                    
    
                                        Bulma Form Complete Reference
                                    
    
                                
    
                                                        
    
                            
    
    
        
    
            Share your thoughts in the comments
        
    
        
    
                                
    
            
    
                
    
                    
    
                    
                
     
                
        
                            
    
                                
    
                            
    

                            

    
            
    
        
     
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma File Colors
            

        
    
        
            

                Bulma File Alignment
            

        
    
        
            

                Bulma File with JavaScript
            

        
    
        
            

                Bulma File Modifiers
            

        
    
        
            

                Bulma File Sizes
            

        
    
        
            

                Bulma File Variables
            

        
    
        
            

                JavaScript | WebAPI | File | File.type Property
            

        
    
        
            

                JavaScript | WebAPI | File | File.size Property
            

        
    
        
            

                JavaScript | WebAPI | File | File.name Property
            

        
    
        
            

                Remove the Chrome's "No file chosen option" from a file input using JavaScript
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        hunter__js                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox