reactjs-file-preview
v1.0.11
Published
Effortlessly preview images, videos, and PDFs in your React applications with MyFilePreview. This lightweight and customizable component intelligently detects file types and displays them.
Readme
reactjs-file-preview – A Smart File Preview Component for React
Effortlessly preview images, videos, and PDFs in your React applications with reactjs-file-preview. This lightweight and customizable component intelligently detects file types and displays:
- ✅ Images – Render high-quality previews for JPG, PNG, GIF, and more.
- ✅ Videos – Play MP4, WebM, and other video formats directly in the preview.
- ✅ PDFs – Generate a thumbnail preview of the first page for quick viewing.
- ✅ Auto-Detection – Handles file URLs, local files, and external sources.
- ✅ Seamless Integration – Works with any React project with minimal setup.
Perfect for file upload interfaces, document management systems, and media galleries! 🚀
Live Demo: https://akshay2002singh.github.io/reactjs-file-preview/
📦 Installation
To install the latest stable version:
npm install reactjs-file-preview
# OR
yarn add reactjs-file-preview🚀 Usage
Basic Example (Remote URL)
import React from "react";
import FilePreview from "reactjs-file-preview";
const App = () => {
return (
<div>
<h2>File Preview Example</h2>
<FilePreview preview="https://example.com/sample.pdf" />
</div>
);
};
export default App;Example with Placeholder and Error Image
<FilePreview
preview="https://example.com/sample.jpg"
placeHolderImage="https://example.com/placeholder.png"
errorImage="https://example.com/error.png"
/>Local File Example
import sampleImg from "../assets/exampleImage.png";
<div style={{ width: "300px" }}>
<FilePreview preview={sampleImg} />
</div>;File Input Example
<input
type="file"
onChange={(e) => e.target.files && setFile(e.target.files[0])}
style={{ marginBottom: "1rem" }}
/>
<div style={{ width: "600px", height: "400px", borderRadius: '12px', overflow:'hidden' }}>
<FilePreview
preview={file ?? ""}
placeHolderImage="https://placehold.co/600x400/fff/000?text=Placeholder"
errorImage="https://placehold.co/600x400/fff/FF0000?text=Error"
/>
</div>Example with Custom Axios Instance
If your files require authentication or are behind CORS restrictions, you can pass a custom Axios instance:
import axios from "axios";
const customAxios = axios.create({
headers: {
Authorization: "Bearer YOUR_ACCESS_TOKEN",
},
});
<FilePreview
preview="https://example.com/protected-file.pdf"
axiosInstance={customAxios}
/>;📂 Supported Formats
reactjs-file-preview currently supports the following file extensions:
- Images:
jpg,jpeg,png,gif,webp - Videos:
mp4,webm,ogg - Documents: `pdf
Props
Available Props
| Prop Name | Type | Required | Description |
| ------------------ | ------ | -------- | ------------------------------------------------------------------------------------------------------------------- |
| preview | string | File | null | ✅ | The source of the file to preview. Supports: • Remote URL (string)• Local file import via bundler (import sample from "./file.png") • File object from an <input type="file" />• null (shows the placeholder if provided) |
| clarity | string | ❌ | Defines clarity of the file being previewed. Defaults to 1000. Higher the value, more the loading time of the file. |
| placeHolderImage | string | ❌ | URL of an image to display if no file is provided. |
| errorImage | string | ❌ | URL of an image to display if the file fails to load. |
| fileType | string | ❌ | Type of the file (image, video, pdf). If not provided, the type will be auto-detected. |
| axiosInstance | object | ❌ | Custom Axios instance for fetching files, useful for handling authentication or CORS issues. |
ℹ️ Note:
Ifpreviewis not provided (or isnull) and aplaceHolderImageis supplied, the placeholder image will be shown automatically.
This component will automatically detect the file type and display the appropriate preview. 🎉
🎯 Why Use reactjs-file-preview?
- 📂 Multi-format support – Works with images, videos, and PDFs.
- 🔍 Auto-detection – No need to specify file types manually.
- 🛠️ Customizable – Supports placeholders, error images, and authentication.
- 🏆 Lightweight – Minimal dependencies for fast performance.
- 🚀 Easy to integrate – Works with any React project effortlessly.
Start using reactjs-file-preview today and enhance your file preview experience! 🎉

