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

👋 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);