Blaze UI File Upload Attributes

Last Updated : 25 Apr, 2022

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI provides features to upload a file to the website directly from the device.

There are three attributes offered by Blaze UI File Upload:

drop: The file uploader is transformed into a drop zone. Based on the URL value, a dropzone will attempt to upload the files automatically.
multiple: This attribute allows multiple files to be selected at a time.
url: This attribute specifies the endpoint to upload the files to, defaults to ‘/’.

Blaze UI File Upload CSS classes:

c-file-upload: This class is used to add the file upload feature.
c-file-upload–drop: This class is used to add the drop-zone box.

We can add a file upload feature using the blaze-file-upload tag provided by Blaze UI without defining any class. For this follow the following given syntax.

Syntax:

<blaze-file-upload ...>
    ...
</blaze-file-upload>

We can add a file upload feature using the classes provided by Blaze UI.

Syntax:

<div class="c-file-upload">
    ...
    <input type="file" />
</div>

Example 1: The following code demonstrates the Blaze UI file upload attributes using the Blaze UI file upload tag. A drop-zone is added, when we click on the text it will allow us to upload multiple files from our device.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Hello World!</title> 
    <link rel="stylesheet" href="styles.css" /> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
  
    <style> 
        .Logo { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="Logo"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Blaze UI File Upload 
    </h3> 
    <blaze-file-upload drop multiple> 
        Click to upload file 
    </blaze-file-upload> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the Blaze UI file upload attributes using the Blaze UI CSS Classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Hello World!</title> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
  
    <style> 
        .Logo { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="Logo"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Blaze UI File Upload using CSS 
    </h3> 
    <div class="c-file-upload c-file-upload--drop"> 
        Upload files 
        <input type="file" /> 
    </div> 
</body> 
  
</html>