Blaze UI File Upload Events - Coding

Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. 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 to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI File Upload events. There are two events for the File Upload component named “uploading” and “uploaded”. Those events are listed below.

Blaze UI File Upload Events:

uploading: This event is triggered when file(s) are dropped in the dropzone to upload.
uploaded: This event is triggered when file(s) are uploaded completely.

Syntax:

const el = document.querySelector('blaze-file-upload');
el.addEventListener('event-name', (e) => {
    ...
});

Example 1: In this example, we show how to execute some code when the uploading event is triggered.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css"> 
    <script type="module" src= 
"https://unpkg.com/@blaze/[email protected]/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
</head> 
  
<body style="padding:50px;"> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h2> Blaze UI File Upload Events </h2> 
    <blaze-alert id="myAlert" type="info"> 
        <i>uploading</i> Event Triggered 
    </blaze-alert> 
    <blaze-file-upload drop> 
        <span>Select/Drop Files to Upload</span> 
    </blaze-file-upload> 
  
    <script> 
        (async () => { 
            await customElements.whenDefined('blaze-file-upload'); 
            const el = document.querySelector('blaze-file-upload'); 
  
            el.addEventListener('uploading', (e) => { 
                const alert = document.querySelector('blaze-alert#myAlert'); 
                alert.show(); 
            }); 
        })(); 
    </script> 
</body> 
</html>

Output:

Example 2: In this example, we used the file uploaded event to show an alert message when the file is completed uploading. For this, we have to create an endpoint to receive the file uploads. We have “server.js” file for the NodeJS server for the “/upload” endpoint.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css"> 
    <script type="module" src= 
"https://unpkg.com/@blaze/[email protected]/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
</head> 
  
<body style="padding:50px;"> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h2> Blaze UI File Upload Events </h2> 
    <blaze-alert id="myAlert" type="success"> 
        <i>completed</i> Event Triggered 
    </blaze-alert> 
  
    <blaze-file-upload drop url="http://localhost:8080/upload"> 
        Drop/Select File to Upload 
    </blaze-file-upload> 
  
    <script> 
        (async () => { 
            await customElements.whenDefined('blaze-file-upload'); 
            const el = document.querySelector('blaze-file-upload'); 
  
            el.addEventListener('uploaded', (e) => { 
                const alert = document.querySelector('blaze-alert#myAlert'); 
                alert.show(); 
            }) 
        })(); 
    </script> 
</body> 
</html>

server.js (For accepting file uploads)

Javascript

const express = require("express"); 
const multer = require("multer"); 
const app = express(); 
  
app.use((req, res, next) => { 
    res.setHeader("Access-Control-Allow-Origin", "*"); 
    res.header( 
        "Access-Control-Allow-Headers", 
        "Origin, X-Requested-With, Content-Type, Accept"
    ); 
    next(); 
}); 
  
var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
        cb(null, "uploads"); 
    } 
}) 
  
var upload = multer({ 
    storage: storage, 
}).any(); 
  
app.post("/upload", function (req, res, next) { 
    console.log("Request Received."); 
    upload(req, res, function (err) { 
  
        if (err) { 
            console.log(err); 
            res.send(err); 
        } 
        else { 
            console.log("Success, Image uploaded!"); 
            res.status(200); 
            res.send(); 
        } 
    }) 
}) 
  
app.listen(8080, function (error) { 
    if (error) throw error 
    console.log("Server Running on PORT 8080"); 
});

Output:

Reference: https://www.blazeui.com/components/file-upload/

Reffered: https://www.geeksforgeeks.org

CSS

Related
Blaze UI Autocomplete Events
Blaze UI Autocomplete Methods
Design a Carousel Column Expansion Animation Effect on Hover using CSS
How to fix weird behaviors of floating elements using CSS ?
Foundation CSS Abide Accessibility

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13