Blaze UI File Upload Events
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= <script type="module" src= </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= <script type="module" src= </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> 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/
Please Login to comment...