DEV Community: Aamir saleem lone

Beyond Custom Events: 9 Native Browser APIs Every Web Developer Should Know

Aamir saleem lone — Tue, 22 Jul 2025 11:54:01 +0000

So you just discovered CustomEvent in JavaScript and feel like a wizard? Get ready — the browser has a whole toolbox of magic you haven’t explored yet.

In my last post, we explored how CustomEvent and dispatchEvent let you build decoupled, modular web apps using your own events like user:loggedIn or pdf:uploaded.

But Custom Events are just the beginning.

The browser gives us built-in powers for observing, reacting, communicating, and scheduling — without any external libraries or frameworks.

Here are 9 other native APIs and patterns that’ll seriously level up your frontend game.

🔍 1. MutationObserver – Watch the DOM like a spy

Want to react when someone adds a new element to the DOM? Or modifies attributes on the fly?

const observer = new MutationObserver((mutations) => {
  mutations.forEach((m) => console.log('DOM changed:', m));
});

observer.observe(document.body, { childList: true, subtree: true });

🔧 Great for: Auto-refresh, syncing UI, building extensions, or watching 3rd party libraries change the DOM.

👁 2. IntersectionObserver –

Know when elements enter the viewport

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Visible:', entry.target);
    }
  });
});

observer.observe(document.querySelector('.lazy-image'));

🔧 Great for: Lazy loading, infinite scroll, animations on scroll, analytics triggers.

🛰 3. BroadcastChannel –

Communicate between tabs in real-time

const channel = new BroadcastChannel('notifications');
channel.postMessage({ type: 'LOGOUT' });

channel.onmessage = (e) => {
  console.log('Received in another tab:', e.data);
};

🔧 Great for: Syncing logout/login, dark mode toggles, or notifications across browser tabs.

💡 4. Event Delegation –

Efficiently handle dynamic elements

Instead of attaching listeners to every button:

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.btn-delete')) {
    console.log('Delete clicked!');
  }
});

🔧 Great for: Dynamic UIs (React-like), modals, dropdowns, or anything created via JS.

🧱 5. Web Components + Custom Elements –

Create your own HTML tags

class MyAlert extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div style="color:red">⚠️ ${this.getAttribute('text')}</div>`;
  }
}

customElements.define('my-alert', MyAlert);

<my-alert text="This is a custom alert!"></my-alert>

🔧 Great for: Design systems, reusable UI components, widget libraries.

⏱ 6. RequestIdleCallback –

Schedule tasks when the browser is free

requestIdleCallback(() => {
  console.log('Non-critical task running');
});

🔧 Great for: Preloading content, background caching, analytics pings — all without slowing the user down.

👀 7. Page Visibility API –

Know when users leave or return to your tab

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('User left the tab');
  } else {
    console.log('User is back!');
  }
});

🔧 Great for: Pausing videos, deferring tasks, tracking engagement time.

📦 8. History API (`pushState`) –

Navigate without reloading the page

history.pushState({ page: 2 }, 'Page 2', '/page2');

window.addEventListener('popstate', (event) => {
  console.log('User hit back/forward:', event.state);
});

🔧 Great for: Single Page Apps, modals with URLs, breadcrumb-based navigation.

🧩 9. Subclassing EventTarget –

Build your own event bus

class Emitter extends EventTarget {}
const bus = new Emitter();

bus.addEventListener('app:shutdown', () => console.log('Goodbye...'));

bus.dispatchEvent(new Event('app:shutdown'));

🔧 Great for: Pub/Sub patterns, internal messaging systems, or micro frontends.

💥 Bonus: Combine These for Crazy Power

Imagine this:

A Web Component that lazy-loads images using IntersectionObserver
It fires a image:loaded CustomEvent
Other components react via an EventTarget-based bus
A MutationObserver updates layout when images appear

And it’s all vanilla JS. No React, no Vue, no jQuery.

🎯 Conclusion

These aren’t just random APIs — they’re tools that help you think like a system architect, not just a coder.

Whether you’re building small widgets or full-blown SPAs, these features let you:

React to change
Communicate cleanly
Schedule smartly
Stay lightweight

🧠 TL;DR – 9 Native Powers to Explore

Feature	Use Case
`MutationObserver`	Watch DOM for changes
`IntersectionObserver`	Track element visibility
`BroadcastChannel`	Cross-tab communication
`Event Delegation`	Efficient event handling
`Web Components`	Reusable custom elements
`requestIdleCallback`	Background tasks
`Page Visibility API`	Engagement tracking
`pushState` + `popstate`	SPA routing
`EventTarget` subclass	Custom event bus

✍️ You?

Have you used any of these in your project? Want a CodeSandbox showing them all together?

Let’s talk in the comments 💬

Superpower Your Web Apps with Custom Events in JavaScript

Aamir saleem lone — Tue, 22 Jul 2025 11:31:24 +0000

"What if your components could talk to each other like real teammates, without hardcoding dependencies or tangled callbacks?"

Well… Custom Events in JavaScript can do exactly that.

In this article, we’ll break down what Custom Events are, how they work, when to use them, and how to unleash their power to build cleaner, smarter, and decoupled applications.

🧠 What Are Custom Events?

JavaScript in the browser already comes with tons of built-in events:

click
keydown
submit
scroll
focus

But what if you want your own event? Something like:

user:loggedIn
pdf:uploaded
chat:newMessage

That’s where CustomEvent comes in — a native JavaScript API that allows you to create your own event types with your own data payload.

🧪 Let's Create Our First Custom Event

Imagine this situation:

You log in a user. Now, you want multiple parts of your app to react to it:

Show a welcome banner
Load personalized data
Track login in analytics

Instead of calling functions manually, you can simply:

Dispatch a custom event like user:loggedIn
Let other modules listen and respond independently

🔧 Code Example:

// 1. Someone listens to the event
document.addEventListener('user:loggedIn', (e) => {
  console.log('Welcome,', e.detail.username);
  console.log('Token:', e.detail.token);
});

// 2. Somewhere else in the app, we dispatch the event
const userInfo = { username: 'aamir', token: 'abc123' };

const loginEvent = new CustomEvent('user:loggedIn', {
  detail: userInfo, // Send data
  bubbles: true,
  cancelable: true,
});

document.dispatchEvent(loginEvent);

🎉 Output:

Welcome, aamir
Token: abc123

⚡️ Why Should You Use Custom Events?

Here’s why custom events are awesome:

✅ Benefit	💬 Explanation
Decoupled logic	No tight coupling between modules
Descriptive names	Event names like `pdf:uploaded` are semantic
Cross-component communication	Perfect for large apps or component libraries
Reusable listeners	Any number of listeners can respond independently
Pass custom data	Send details using the `detail` key

📦 CustomEvent vs Event vs element.click()

Feature	`element.click()`	`new Event()`	`new CustomEvent()`
Native trigger	✅ Yes	❌ No	❌ No
Custom event name	❌ No	✅ Yes	✅ Yes
Can pass data	❌ No	❌ No	✅ Yes (via `detail`)
Use case	Simulate DOM behavior	Trigger native-like events	Full custom app logic

🧠 Naming Custom Events Like a Pro

To keep things semantic and readable:

Domain	Event Name
User	`user:registered`, `user:logout`
PDF	`pdf:uploaded`, `pdf:annotated`
Form	`form:submit`, `form:invalid`
Analytics	`track:click`, `track:download`

✔ Use : to namespace your events
✔ Use lowercase and hyphen/colon for clarity

🎯 Real-World Example: Uploading a PDF

Let’s say your app allows users to upload PDFs. After an upload, you want:

A toast notification to show
Analytics to record the event
A reader component to refresh

Instead of calling all 3 manually, just fire an event:

🔥 Dispatcher (Uploader Component)

const pdfData = { name: 'docintel.pdf', size: '3MB' };

document.dispatchEvent(new CustomEvent('pdf:uploaded', {
  detail: pdfData
}));

📣 Listener (Analytics Module)

document.addEventListener('pdf:uploaded', (e) => {
  console.log('Tracking:', e.detail.name);
});

📣 Listener (Reader Module)

document.addEventListener('pdf:uploaded', (e) => {
  refreshReaderWith(e.detail.name);
});

✅ No dependencies. Just events.

📍 Bonus: Bubble and Cancel Custom Events

const myEvent = new CustomEvent('form:submit', {
  detail: { formId: 123 },
  bubbles: true,      // allow bubbling to parents
  cancelable: true,   // allow preventDefault
});

document.getElementById('form').dispatchEvent(myEvent);

In the listener:

document.addEventListener('form:submit', (e) => {
  if (!e.detail.formId) {
    e.preventDefault(); // Stop if invalid
  }
});

🧩 Event Communication Across Components

If you use frameworks like React, Vanilla JS, or Web Components, custom events are the perfect solution to send signals without coupling components.

Imagine:

<video-player></video-player>
<comment-box></comment-box>

The <video-player> fires video:ended, and <comment-box> listens — with zero imports between them.

🛠 Tooling Tip: Logging All Events

For debugging custom events:

document.addEventListener('user:loggedIn', console.log);

Or make a catch-all:

document.addEventListener('*', (e) => console.log(e));

(This catch-all needs a wrapper to work with proxies though.)

✨ Conclusion

Custom Events in JavaScript give your web app superpowers. They’re simple, powerful, and promote clean, modular communication.

If your app is growing — and components need to talk — don’t hardwire everything. Let them whisper in events. 🎤

🔗 TL;DR

✅ Use CustomEvent for:

Custom event names
Passing data (detail)
Building clean, decoupled app logic

🧠 Remember:

const evt = new CustomEvent('event:name', { detail: {...} });
element.dispatchEvent(evt);

Scalable Resumable File Uploads to S3 with Node.js, Reactjs , AWS SDK & MySQL

Aamir saleem lone — Tue, 22 Jul 2025 07:05:28 +0000

Uploading large files reliably is tough — browser crashes, flaky internet, or sudden interruptions can ruin everything.

This tutorial shows how to implement resumable, chunked uploads to Amazon S3, using:

🧠 multipart upload API from AWS SDK
🪣 Node.js + Express + Multer
💾 MySQL for upload session tracking
✅ Clean chunk validation & completion logic

🔧 Tech Stack

Backend: Node.js + Express
Frontend: React.js
Database: MySQL (for session/chunk tracking)
Storage: AWS S3 (multipart upload)
Middleware: Multer

🗂️ Core Concepts

Init Upload: Creates multipart upload session and saves to DB
Upload Chunk: Sends chunk with part number to S3
Check Chunk: Avoid duplicate uploads
Complete Upload: Merges parts and cleans up
Fallback: Automatically retries on failures using resumable clients

📁 Folder Structure

/helpers/awsConfig.js
/config/db.js
/controllers/uploadController.js

🚀 Upload Controller Code

const path = require('path');
const { S3Config } = require('../../helper/awsConfig');
const bucketName = 'docintel';
const mysqlLib = require('../../config/db');

const asyncHandler = (fn) => (req, res) => {
  Promise.resolve(fn(req, res)).catch((err) => {
    console.error(err);
    res.status(500).json({ error: err.message });
  });
};

📂 Get Folder Name Based on Type

const getFolderName = async (type, method = null, authId) => {
  if (method == 'libraryType') {
    let [data] = await mysqlLib.executeQuery(
      'select folder_name from users where id = ?',
      [authId]
    );
    return `video/${data.folder_name}`;
  }

  const map = {
    image: 'dummy_images',
    video: 'dummy_videos',
    audio: 'dummy_audios',
    document: 'dummy_documents',
  };

  return map[type] || map.document;
};

🔄 API Endpoints

1️⃣ Upload Single File to S3 (non-chunked)

exports.uploadFileToAws = asyncHandler(async (req, res) => {
  const { type, name } = req.body;
  const file = req.file;
  if (!file) throw new Error('No file uploaded');

  const ext = path.extname(file.originalname).toLowerCase();
  if (!/\.(jpeg|jpg|png|gif|svg|mp3|mp4|pdf)$/.test(ext)) {
    throw new Error('Unsupported file type');
  }

  const folderName = getFolderName(type);
  const fileName = `${path.parse(name).name}_${Date.now()}${ext}`.replace(/\s+/g, '_');
  const fullPath = `${folderName}/${fileName}`;

  const result = await S3Config.upload({
    Bucket: bucketName,
    Key: fullPath,
    Body: file.buffer,
    ACL: 'public-read',
  }).promise();

  res.status(200).json({ message: 'File uploaded successfully', data: result.Location });
});

2️⃣ Initialize Multipart Upload

exports.initUpload = asyncHandler(async (req, res) => {
  const { authId, body } = req;
  const { filename, type, method } = body;
  if (!filename || !type) throw new Error('Missing filename or type');

  const folderName = await getFolderName(type, method, authId);
  const s3Key = `${folderName}/${Date.now()}_${filename}`;

  const { UploadId: uploadId } = await S3Config.createMultipartUpload({
    Bucket: bucketName,
    Key: s3Key,
    ACL: 'public-read',
  }).promise();

  await mysqlLib.executeQuery(
    'INSERT INTO upload_sessions (upload_id, s3_key, type) VALUES (?, ?, ?)',
    [uploadId, s3Key, type]
  );

  res.status(200).json({ uploadId, s3Key });
});

3️⃣ Check if Chunk Exists

exports.checkUpload = asyncHandler(async (req, res) => {
  const { resumableChunkNumber, uploadId } = req.query;

  const [session] = await mysqlLib.executeQuery(
    'SELECT * FROM upload_sessions WHERE upload_id = ?',
    [uploadId]
  );
  if (!session) return res.status(404).send('Upload session not found');

  const [part] = await mysqlLib.executeQuery(
    'SELECT * FROM upload_parts WHERE upload_id = ? AND part_number = ?',
    [uploadId, resumableChunkNumber]
  );

  return part ? res.status(200).send('Chunk exists') : res.status(404).send('Chunk not found');
});

4️⃣ Upload Chunk to S3

exports.uploadChunk = asyncHandler(async (req, res) => {
  const { resumableChunkNumber, uploadId } = req.body;

  const [session] = await mysqlLib.executeQuery(
    'SELECT * FROM upload_sessions WHERE upload_id = ?',
    [uploadId]
  );
  if (!session) throw new Error('Invalid upload session');

  const partNumber = parseInt(resumableChunkNumber);
  const result = await S3Config.uploadPart({
    Bucket: bucketName,
    Key: session.s3_key,
    PartNumber: partNumber,
    UploadId: uploadId,
    Body: req.file.buffer,
  }).promise();

  await mysqlLib.executeQuery(
    'INSERT INTO upload_parts (upload_id, part_number, etag) VALUES (?, ?, ?)',
    [uploadId, partNumber, result.ETag]
  );

  res.status(200).json({
    message: 'Chunk uploaded',
    ETag: result.ETag,
    PartNumber: partNumber,
  });
});

5️⃣ Complete Multipart Upload

exports.completeUpload = asyncHandler(async (req, res) => {
  const { uploadId } = req.body;

  const [session] = await mysqlLib.executeQuery(
    'SELECT * FROM upload_sessions WHERE upload_id = ?',
    [uploadId]
  );
  if (!session) throw new Error('Invalid upload session');

  const parts = await mysqlLib.executeQuery(
    'SELECT part_number, etag FROM upload_parts WHERE upload_id = ? ORDER BY part_number ASC',
    [uploadId]
  );

  const sortedParts = parts.map(part => ({
    PartNumber: parseInt(part.part_number),
    ETag: part.etag
  }));

  const result = await S3Config.completeMultipartUpload({
    Bucket: bucketName,
    Key: session.s3_key,
    UploadId: uploadId,
    MultipartUpload: { Parts: sortedParts },
  }).promise();

  // Optional cleanup
  await mysqlLib.executeQuery('DELETE FROM upload_parts WHERE upload_id = ?', [uploadId]);
  await mysqlLib.executeQuery('DELETE FROM upload_sessions WHERE upload_id = ?', [uploadId]);

  res.status(200).json({
    message: 'Upload completed',
    url: decodeURIComponent(result.Location),
    key: result.Key,
  });
});

✅ Database Tables (MySQL)

CREATE TABLE `upload_sessions` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `upload_id` VARCHAR(255),
  `s3_key` VARCHAR(512),
  `type` VARCHAR(50),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE `upload_parts` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `upload_id` VARCHAR(255),
  `part_number` INT,
  `etag` VARCHAR(255),
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

🧠 Final Thoughts

✅ Why this works:

File uploads won't break on slow connections
You can resume failed uploads
Saves bandwidth by checking existing chunks
Scales beautifully with S3's multipart APIs

** Frontend Using React js
We’ll use:

Resumable.js for chunked uploads
React for UI
Axios for making API calls

* Dummy API endpoints to simulate a real-world system

🧩 What You'll Build

✅ File validation (size, type)
✅ Chunked upload via multipart upload
✅ Pause/Resume/Cancel support
✅ Real-time progress and speed
✅ Retry on failure
✅ Finalization after upload

📦 Dependencies

Install the following if you haven't:

npm install resumablejs axios react-bootstrap react-circular-progressbar react-toastify

🛠 Backend API Expectations

Assume the following dummy endpoints (you can mock these for dev):

Endpoint	Method	Description
`/api/init-upload`	POST	Initialize multipart upload
`/api/upload`	POST	Upload a file chunk
`/api/complete-upload`	POST	Complete multipart upload
`/api/check-chunk`	GET	Check if a chunk exists (optional)

📁 Frontend Uploader Component

// ResumableUploader.jsx
import React, { useEffect, useRef, useState } from "react";
import Resumable from "resumablejs";
import axios from "axios";
import { Modal, Button } from "react-bootstrap";
import { CircularProgressbar } from "react-circular-progressbar";
import { toast } from "react-toastify";

const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = ["application/pdf", "image/png", "image/jpeg", "video/mp4"];
const MAX_SIZE_MB = 1024;

const ResumableUploader = ({ label, onSuccess }) => {
  const resumableRef = useRef(null);
  const uploadId = useRef(null);
  const s3Key = useRef(null);
  const browseRef = useRef(null);
  const activeUpload = useRef(null);

  const [progress, setProgress] = useState(0);
  const [uploading, setUploading] = useState(false);
  const [status, setStatus] = useState("");

  const initUploadSession = async (file) => {
    try {
      const response = await axios.post("https://dummyapi.com/api/init-upload", {
        filename: file.name,
        type: file.type,
      });
      uploadId.current = response.data.uploadId;
      s3Key.current = response.data.s3Key;
      return true;
    } catch (err) {
      toast.error("Failed to initialize upload.");
      return false;
    }
  };

  const validateFile = (file) => {
    if (!ALLOWED_TYPES.includes(file.type)) {
      toast.error("Unsupported file type");
      return false;
    }
    if (file.size > MAX_SIZE_MB * 1024 * 1024) {
      toast.error("File too large");
      return false;
    }
    return true;
  };

  const completeUpload = async () => {
    try {
      const response = await axios.post("https://dummyapi.com/api/complete-upload", {
        uploadId: uploadId.current,
      });
      toast.success("Upload complete!");
      onSuccess?.(response.data.url);
    } catch (err) {
      toast.error("Upload finalization failed.");
    } finally {
      setUploading(false);
      setProgress(0);
      uploadId.current = null;
      s3Key.current = null;
      activeUpload.current = null;
    }
  };

  const handleFileAdded = async (file) => {
    if (!validateFile(file.file)) {
      resumableRef.current.removeFile(file);
      return;
    }

    setUploading(true);
    const initialized = await initUploadSession(file.file);
    if (!initialized) return;

    resumableRef.current.opts.query = { uploadId: uploadId.current };
    activeUpload.current = file;
    resumableRef.current.upload();
  };

  const handleProgress = (file) => {
    const percent = Math.floor(file.progress() * 100);
    setProgress(percent);
  };

  const handleSuccess = () => {
    completeUpload();
  };

  const handleError = (file, message) => {
    console.error("Upload error:", message);
    toast.error("Upload failed.");
    setUploading(false);
  };

  useEffect(() => {
    const r = new Resumable({
      target: "https://dummyapi.com/api/upload",
      query: {},
      fileParameterName: "file",
      chunkSize: CHUNK_SIZE,
      simultaneousUploads: 3,
      testChunks: false,
      maxFiles: 1,
      throttleProgressCallbacks: 1,
      headers: {
        auth: "Bearer token",
      },
      fileType: ALLOWED_TYPES,
    });

    r.assignBrowse(browseRef.current);
    r.on("fileAdded", handleFileAdded);
    r.on("fileProgress", handleProgress);
    r.on("fileSuccess", handleSuccess);
    r.on("fileError", handleError);

    resumableRef.current = r;

    return () => {
      r.cancel();
    };
  }, []);

  return (
    <>
      <Button ref={browseRef} disabled={uploading}>
        {uploading ? "Uploading..." : label}
      </Button>

      <Modal show={uploading} centered backdrop="static">
        <Modal.Header>
          <Modal.Title>Uploading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <CircularProgressbar value={progress} text={`${progress}%`} />
          <p className="mt-2">{status}</p>
          <Button variant="danger" onClick={() => resumableRef.current.cancel()}>
            Cancel
          </Button>
        </Modal.Body>
      </Modal>
    </>
  );
};

export default ResumableUploader;

🔧 Notes

Replace https://dummyapi.com/api/... with your actual backend endpoints.
Use onSuccess callback to handle uploaded file URLs (e.g., save to DB).
The resumablejs library manages chunking and retrying for you!

🧪 Example Usage

<ResumableUploader
  label="Upload Video"
  onSuccess={(url) => console.log("Uploaded to:", url)}
/>

🧠 Wrap Up

This setup provides a robust resumable upload experience, with built-in retry, progress feedback, and finalization using AWS S3 multipart under the hood. It's production-ready and highly extensible.

Tags: react aws s3 upload resumablejs axios frontend

How to Build a Resumable File Uploader in React with Node.js and resumable.js

Aamir saleem lone — Tue, 22 Jul 2025 06:11:17 +0000

📦 Resumable File Uploads with React and Node.js using resumable.js

Uploading large files comes with risks — unstable connections, browser crashes, or poor bandwidth can cause full uploads to fail.

Instead of starting over every time, resumable uploads allow you to:

✅ Upload files in small chunks
✅ Resume if the connection breaks
✅ Prevent re-uploads of completed files
✅ Efficiently handle large files (GBs+)

🚀 What We'll Build

We'll create a fully working Resumable File Uploader using:

Frontend: React
Backend: Node.js (Express + Multer)
Library: resumable.js

🧰 What You'll Learn

Chunked uploads with resumable.js
Handling file chunks in Node.js with multer
Merging chunks into a complete file
Preventing duplicate uploads using localStorage
Deleting chunks after merge for clean storage

⚙️ Backend Setup (Node.js + Express)

Step 1: Initialize

mkdir resumable-uploader-backend
cd resumable-uploader-backend
npm init -y
npm install express multer cors

Step 2: `server.js`

// ✅ server.js
const express = require("express");
const cors = require("cors");
const fs = require("fs");
const path = require("path");
const multer = require("multer");

const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const UPLOAD_DIR = path.join(__dirname, "uploads");
if (!fs.existsSync(UPLOAD_DIR)) fs.mkdirSync(UPLOAD_DIR);

🔄 Handle Chunk Requests

// Check if chunk exists
app.get("/upload", (req, res) => {
  const { resumableIdentifier, resumableChunkNumber } = req.query;
  const chunkFile = path.join(UPLOAD_DIR, `${resumableIdentifier}.${resumableChunkNumber}`);
  fs.existsSync(chunkFile) ? res.status(200).send("Found") : res.status(204).send("Not Found");
});

⬆️ Handle Chunk Upload with Multer

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, UPLOAD_DIR),
  filename: (req, file, cb) => {
    const { resumableIdentifier, resumableChunkNumber } = req.body;
    cb(null, `${resumableIdentifier}.${resumableChunkNumber}`);
  },
});
const upload = multer({ storage });

app.post("/upload", upload.single("file"), (req, res) => {
  res.status(200).send("Chunk uploaded");
});

🧩 Merge Chunks After Upload

app.post("/merge", (req, res) => {
  const { filename, totalChunks, identifier } = req.body;
  const finalPath = path.join(UPLOAD_DIR, filename);
  const writeStream = fs.createWriteStream(finalPath);

  let index = 1;

  const appendChunk = () => {
    const chunkPath = path.join(UPLOAD_DIR, `${identifier}.${index}`);
    fs.createReadStream(chunkPath)
      .on("error", () => res.status(500).send("Chunk read error"))
      .on("end", () => {
        fs.unlink(chunkPath, () => {});
        if (++index <= totalChunks) appendChunk();
        else writeStream.end(() => res.send("File merged successfully"));
      })
      .pipe(writeStream, { end: false });
  };

  appendChunk();
});

app.listen(5000, () => console.log("✅ Server running on http://localhost:5000"));

💻 Frontend Setup (React + Resumable.js)

Step 1: Install

npm install resumablejs

Step 2: `ResumableUploader.js`

import React, { useEffect, useRef, useState } from "react";
import Resumable from "resumablejs";

const ResumableUploader = () => {
  const browseRef = useRef(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [status, setStatus] = useState("");
  const resumableRef = useRef(null);

  const handleFileAdded = (file) => {
    const uploaded = JSON.parse(localStorage.getItem("uploaded") || "[]");
    if (uploaded.includes(file.uniqueIdentifier)) {
      setStatus("File already uploaded.");
      return;
    }
    setStatus("Uploading…");
    resumableRef.current.upload();
  };

  const handleFileSuccess = async (file) => {
    const uploaded = JSON.parse(localStorage.getItem("uploaded") || "[]");
    uploaded.push(file.uniqueIdentifier);
    localStorage.setItem("uploaded", JSON.stringify(uploaded));

    await fetch("http://localhost:5000/merge", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        filename: file.fileName,
        totalChunks: file.chunks.length,
        identifier: file.uniqueIdentifier,
      }),
    });

    resumableRef.current.removeFile(file);
    setStatus("Upload complete and merged.");
  };

  useEffect(() => {
    const r = new Resumable({
      target: "http://localhost:5000/upload",
      chunkSize: 1 * 1024 * 1024, // 1MB
      fileParameterName: "file",
      testChunks: true,
      throttleProgressCallbacks: 1,
    });

    resumableRef.current = r;
    r.assignBrowse(browseRef.current);

    r.on("fileAdded", handleFileAdded);
    r.on("fileProgress", file => setUploadProgress(Math.floor(file.progress() * 100)));
    r.on("fileSuccess", handleFileSuccess);
    r.on("fileError", () => setStatus("Upload failed."));
  }, []);

  return (
    <div style={{ padding: 20 }}>
      <h2>Resumable File Uploader</h2>
      <button ref={browseRef}>Choose File</button>
      {uploadProgress > 0 && (
        <>
          <progress value={uploadProgress} max="100" />
          <p>{uploadProgress}%</p>
        </>
      )}
      {status && <p><strong>Status:</strong> {status}</p>}
    </div>
  );
};

export default ResumableUploader;

✅ Final Result

With this setup, you can:

Upload large files chunk-by-chunk
Resume uploads even after refreshing
Track real-time progress
Auto-merge on successful upload
Clean up disk space by deleting chunks

🧠 Final Thoughts

Chunked uploads are essential for large files and unstable connections.

By using resumable.js, React, and Node.js, you gain:

🔒 Full control over uploads
☁️ Flexibility to extend to AWS/GCP
🧼 Cleanup logic for old/expired chunks
📂 Organized file management by user/project

Double the Talk, Double the Recording: Capturing Both Sides in Interpreted Zoom Meetings

Aamir saleem lone — Wed, 27 Nov 2024 09:15:50 +0000

In today's globalized world, virtual meetings often involve language interpretation, ensuring everyone can participate effectively. But what happens when you need to capture both the original and interpreted audio for later reference or distribution? Unfortunately, Zoom's native recording feature doesn't offer a direct solution for recording multiple audio streams simultaneously.

This blog will explore two workarounds to achieve this: using multiple devices and third-party recording software. We'll delve into the details and considerations for each approach, helping you choose the most suitable one for your needs.

The Challenge: Capturing Two Audio Tracks

Imagine a Zoom meeting where English is being spoken and translated into Spanish. You want to capture both the original English audio and the Spanish interpretation. While Zoom allows recording meetings, it only creates a single audio track containing the combined audio feed.

Workaround 1: Dual Device Recording

This method leverages two separate devices to record each audio stream independently.

*Here's how it works:
*
Join the Meeting: Join the Zoom meeting on both devices (laptops, tablets, or smartphones).
Separate Recordings: On one device, configure Zoom to record the meeting as usual. This will capture the original audio feed. On the other device, use a different Zoom account (if necessary) to join the meeting as a participant.
Sync Later: Use timestamps or visual cues within the meeting (e.g., screen sharing a timestamp slide) to synchronize the recordings later in editing software.
Benefits:

Simple Setup: This requires minimal additional tools.
No Additional Software: Utilizes Zoom's built-in recording functionality.
Drawbacks:

Two Devices Needed: Requires access and management of extra equipment.
Synchronization Effort: Synchronizing recordings can be time-consuming.
Workaround 2: Third-Party Recording Software

This approach introduces dedicated recording software to capture both audio streams simultaneously.

What You'll Need:

Third-Party Software: Tools like Camtasia, OBS Studio, or similar screen recording software can achieve this.
Audio Routing Configuration: Configure the software to capture both the system audio (Zoom audio feed) and microphone audio (typically used for in-meeting commentary) as separate tracks.
Here's how it works:

Join the Meeting: Join the Zoom meeting on your main device.
Software Setup: Configure the recording software to capture both system audio (Zoom audio feed) and microphone audio (optional) as separate tracks.
Start Recording: Initiate recording in the software before joining the meeting.
Editing (Optional): Once the recording is complete, editing software allows further refinement and synchronization (if needed).
Benefits:

Flexibility and Control: Offers greater control over audio capture and recording settings.
Potential for Additional Features: Some software may offer features like screen annotation during recording.
Drawbacks:

Additional Software: Requires purchasing or using a separate recording software.
Technical Knowledge Needed: Setting up audio routing might require some technical expertise.
Important Considerations:

Permissions and Legality: Ensure proper consent for recording individuals and using their voices.
Interpreter Agreement: Obtain consent from interpreters before recording their audio.
File Size Management: Recording multiple audio streams can significantly increase file sizes. Consider cloud storage or compression techniques.
Conclusion:

While Zoom doesn't offer native recording of multiple audio streams during interpretation, these workarounds can help you achieve your goals. Choose the method that best suits your technology setup and comfort level. Remember to test beforehand and keep legal and ethical considerations in mind.

Additional Resources:

Zoom Support Center: https://support.zoom.com/
Third-Party Recording Software Tutorials: Check the respective software providers' websites.
With a little planning and the right approach, you can effectively capture both sides of your interpreted Zoom meetings for future reference and wider distribution.

DEV Community: Aamir saleem lone

Beyond Custom Events: 9 Native Browser APIs Every Web Developer Should Know

🔍 1. MutationObserver – Watch the DOM like a spy

👁 2. IntersectionObserver –

🛰 3. BroadcastChannel –

💡 4. Event Delegation –

🧱 5. Web Components + Custom Elements –

⏱ 6. RequestIdleCallback –

👀 7. Page Visibility API –

📦 8. History API (pushState) –

🧩 9. Subclassing EventTarget –

💥 Bonus: Combine These for Crazy Power

🎯 Conclusion

🧠 TL;DR – 9 Native Powers to Explore

✍️ You?

Superpower Your Web Apps with Custom Events in JavaScript

🧠 What Are Custom Events?

🧪 Let's Create Our First Custom Event

Imagine this situation:

🔧 Code Example:

⚡️ Why Should You Use Custom Events?

📦 CustomEvent vs Event vs element.click()

🧠 Naming Custom Events Like a Pro

🎯 Real-World Example: Uploading a PDF

🔥 Dispatcher (Uploader Component)

📣 Listener (Analytics Module)

📣 Listener (Reader Module)

📍 Bonus: Bubble and Cancel Custom Events

🧩 Event Communication Across Components

🛠 Tooling Tip: Logging All Events

✨ Conclusion

🔗 TL;DR

Scalable Resumable File Uploads to S3 with Node.js, Reactjs , AWS SDK & MySQL

🔧 Tech Stack

🗂️ Core Concepts

📁 Folder Structure

🚀 Upload Controller Code

📂 Get Folder Name Based on Type

🔄 API Endpoints

1️⃣ Upload Single File to S3 (non-chunked)

2️⃣ Initialize Multipart Upload

3️⃣ Check if Chunk Exists

4️⃣ Upload Chunk to S3

5️⃣ Complete Multipart Upload

✅ Database Tables (MySQL)

🧠 Final Thoughts

* Dummy API endpoints to simulate a real-world system

🧩 What You'll Build

📦 Dependencies

🛠 Backend API Expectations

📁 Frontend Uploader Component

🔧 Notes

🧪 Example Usage

🧠 Wrap Up

How to Build a Resumable File Uploader in React with Node.js and resumable.js

📦 Resumable File Uploads with React and Node.js using resumable.js

🚀 What We'll Build

🧰 What You'll Learn

⚙️ Backend Setup (Node.js + Express)

Step 1: Initialize

Step 2: server.js

🔄 Handle Chunk Requests

⬆️ Handle Chunk Upload with Multer

🧩 Merge Chunks After Upload

💻 Frontend Setup (React + Resumable.js)

Step 1: Install

Step 2: ResumableUploader.js

✅ Final Result

🧠 Final Thoughts

Double the Talk, Double the Recording: Capturing Both Sides in Interpreted Zoom Meetings

📦 8. History API (`pushState`) –

Step 2: `server.js`

Step 2: `ResumableUploader.js`