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

#react #javascript #webdev #tutorial

👋 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