DEV Community: Sarvesh Upadhyay

📂 Build a Metadata Viewer in React (Audio, Video, Image, PDF, eBook)

Sarvesh Upadhyay — Wed, 25 Mar 2026 07:04:43 +0000

👋 Introduction

Ever wondered how to extract hidden metadata from files like images, videos, or documents? 🤔

Metadata includes:

📸 Image EXIF (camera, location)
🎵 Audio details (artist, bitrate)
🎬 Video info (resolution, codec)
📄 PDF properties (author, pages)

In this post, we’ll build a Metadata Viewer in React that supports multiple file types.

🚀 Features

📂 Upload files (Image, Audio, Video, PDF)
🔍 Extract hidden metadata
⚡ Fast and responsive UI
🧠 Supports multiple formats
🎨 Clean UI with React

🧰 Libraries Used

Here are the key libraries used in this project:

📸 exif-js → Extract image metadata
🎵 music-metadata-browser → Audio metadata
🎬 ffmpeg.wasm → Video metadata
📄 pdf-lib → PDF details
📘 epubjs → eBook metadata

📦 Installation

npm install exif-js music-metadata-browser @ffmpeg/ffmpeg pdf-lib epubjs

🖼️ Image Metadata Example

```js id="imgmeta01"
import EXIF from "exif-js";

const getImageMetadata = (file) => {
EXIF.getData(file, function () {
const allMetaData = EXIF.getAllTags(this);
console.log(allMetaData);
});
};




👉 Extracts:

* Camera 📷
* Location 🌍
* Date 🗓️

---

## 🎵 Audio Metadata Example



```js id="audmeta02"
import * as mm from "music-metadata-browser";

const getAudioMetadata = async (file) => {
  const metadata = await mm.parseBlob(file);
  console.log(metadata);
};

👉 Extracts:

Artist 🎤
Album 💿
Duration ⏱️

🎬 Video Metadata Example

```js id="vidmeta03"
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

const ffmpeg = createFFmpeg({ log: true });

const getVideoMetadata = async (file) => {
await ffmpeg.load();
ffmpeg.FS("writeFile", "test.mp4", await fetchFile(file));

const data = ffmpeg.FS("readFile", "test.mp4");
console.log(data);
};




👉 Extracts:

* Resolution 📺
* Codec 🎞️
* Duration ⏱️

---

## 📄 PDF Metadata Example



```js id="pdfmeta04"
import { PDFDocument } from "pdf-lib";

const getPDFMetadata = async (file) => {
  const arrayBuffer = await file.arrayBuffer();
  const pdfDoc = await PDFDocument.load(arrayBuffer);

  console.log({
    title: pdfDoc.getTitle(),
    author: pdfDoc.getAuthor(),
  });
};

📘 eBook Metadata Example

```js id="ebookmeta05"
import ePub from "epubjs";

const getEpubMetadata = async (file) => {
const book = ePub(file);
const metadata = await book.loaded.metadata;
console.log(metadata);
};




---

## 🧠 How It Works

1. 📂 User uploads file
2. 🔍 Detect file type
3. ⚙️ Call respective library
4. 📊 Display metadata

---

## 🎯 Use Cases

* 🔐 Digital forensics
* 📸 Photo analysis
* 🎵 Music organization
* 📚 eBook readers
* 🧑‍💻 Developer tools

---

## ⚠️ Challenges

* ❌ Large video processing is slow
* ❌ Browser limitations (FFmpeg heavy)
* ❌ Some metadata may be missing

---

## 🚀 Future Improvements

* 🌐 Drag & Drop UI
* ☁️ Cloud processing
* 📊 Better visualization
* 🔎 Deep metadata analysis

---

## ❤️ Support

If you found this useful:

👉 Drop a ❤️
👉 Follow me for more React projects
👉 Comment your feedback 👇

---

## 🏷️ Tags

#react #javascript #webdev #opensource

🚀 Blackbox AI Review: Code as Fast as You Think? (2026 Guide)

Sarvesh Upadhyay — Wed, 25 Mar 2026 06:57:26 +0000

👋 Introduction

Ever wished your code could write itself while you just think? 🤯

That’s exactly what Blackbox AI promises.

But is it actually useful for developers… or just hype?

👉 Let’s break it down.

⚡ What is Blackbox AI?

Blackbox AI is an AI-powered coding assistant that helps you:

🔍 Search code instantly
⚡ Auto-complete functions
🧠 Convert ideas into code
📋 Extract code from videos

🎯 Key Features

🔎 1. Code Search Like Google

Search any function and get ready-to-use code snippets.

⚡ 2. AI Autocomplete

Similar to GitHub Copilot but faster suggestions in many cases.

🎥 3. Code from Videos

Copy code directly from YouTube tutorials (🔥 super useful).

🌐 4. Multi-language Support

Supports:

JavaScript
Python
C++
Java …and more.

🛠️ Real Example

Let’s say you want a simple debounce function 👇

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

👉 Blackbox can generate this instantly with just a prompt.

👍 Pros

⚡ Super fast results
🧠 Beginner-friendly
🎯 Saves time in debugging
🔌 Easy integration with VS Code

👎 Cons

❌ Sometimes inaccurate suggestions
❌ Limited deep logic understanding
❌ Needs internet connection

🔥 Blackbox vs GitHub Copilot

Feature	Blackbox	Copilot
Speed ⚡	Fast	Medium
Accuracy 🎯	Medium	High
Learning Curve 📚	Easy	Moderate

💡 When Should You Use It?

Use Blackbox if:

🧑‍💻 You are a beginner
⏱️ You want quick solutions
📚 You learn from tutorials

Avoid if:

🚫 You need production-level precision

🚀 Final Verdict

Blackbox AI is a powerful productivity tool, but not a replacement for real coding skills.

👉 Think of it as your coding assistant, not your brain.

❤️ Support

If you found this helpful:

👉 Drop a ❤️
👉 Follow me for more dev content
👉 Comment your favorite AI tool 👇

🏷️ Tags

ai #webdev #programming #javascript #developers

Blackbox — Code as fast as you think

Sarvesh Upadhyay — Fri, 13 Jan 2023 20:08:28 +0000

Blackbox Code Search

Blackbox code search is build to make developers find the best code snippets to use while building awesome products!

Blackbox code autocomplete is available in 20+ programming languages including: Python, Java, C and C++, C#, JavaScript, SQL, PHP, Go, TypeScript, Kotlin, MATLAB,R, Swift, Rust, Ruby, Dart, Scala.

Here are 4 simple steps to make sure you have a great experience using Blackbox!

Step1: Start the line with "//"

Step2: Write your question for example: "//how to get the stock data of Tesla in python?"

Step3: Once you press the "?" question mark, Blackbox will return the code snippet

Step4: Press Tab to keep the suggested code snippet

Blackbox Code Autocomplete
Blackbox code autocomplete is build to make developers faster while writing code.

Blackbox code autocomplete is available in 20+ programming languages including Python, JavaScript, TypeScript, Go, and Ruby

Here are the 3 simple steps to make sure you have a great experience using Blackbox

Step 1: Open command palette (command + shift + p)

Step 2: Click on “Enable Blackbox Autocomplete

Step 3: Start coding and Blackbox will provide code suggestion each time you hit Enter

Note: For improved accuracy of the suggested code, it is recommended to start with a good comment on the function you want to build and Blackbox suggestions will improve.

Blackbox Code Search on Jupyter Lab & Jupyter Notebooks
Blackbox code search is now available on Jupyter to enable Developers and Data Scientists to find the best code snippets to use while building awesome products !

Here are 4 simple steps to make sure you have a great experience using Blackbox .

Step0: Download the Blackbox Chrome Extension

Step1 : Start the line with the comment symbol depending on which programming language you are using // , # , etc ....

Step2 : Write your question for example : " #connect to mongodb in python?”

Step3 : Once you press the " ? " question mark , Blackbox will return the code snippet

Step4: Press on the “Right Key” to accept the suggested code

An Introduction To React’s Context API

Sarvesh Upadhyay — Sun, 18 Dec 2022 18:48:28 +0000

In this post, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling.

That is basically what a React hook is. It allows us to use state, refs and other React features in our functional components.

THE useState (HOOK)
The useState hook allows us to use state in our functional components. A useState hook takes the initial value of our state as the only argument, and it returns an array of two elements. The first element is our state variable and the second element is a function in which we can use the update the value of the state variable.

Let’s take a look at the following example.
**import React, {useState} from "react";

function SampleComponent(){
const [count, setCount] = useState(0);
}
**