Blaze UI File Upload

Last Updated : 13 Jun, 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. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us create a scalable and responsive website quickly and efficiently with a consistent style.

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

Blaze UI File Upload Attributes: There are three attributes in blaze UI file upload each attribute plays a different role.
Blaze UI File Upload CSS: Here we have a basic type of file upload and the other one is the drop zone area.
Blaze UI File Upload Events: There are two events that can be used in file upload one is uploading and another one is completed.

There are two ways to upload files to your webpage.

By using the blaze-file-upload tag: We can create an upload field with the help of the blaze-file-upload tag/element.

Syntax:

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

By using the c-file-upload class: There is another way to create an upload field with the help of the c-file-upload class.

Syntax:

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

Example 1: The following example will demonstrate how you can upload any file to your web page using the blaze-file-upload tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Blaze UI</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>
    <center>
    <h1 class="Logo">
        GeeksforGeeks
    </h1>
    <h3>
        Blaze UI File Upload
    </h3>
    <blaze-file-upload drop multiple>
        Click to upload file
    </blaze-file-upload>
    </center>
</body>
 
</html>

Output:

Example 2: The following example will demonstrate how you can upload any file to your web page using the c-file-upload class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Blaze UI</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>
    <center>
    <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>
    </center>
</body>
 
</html>