Vite-Plugin-File

vite-plugin-file enables seamless access to file information and data in Vite projects.

• Efficient File Handling: Stream large files without consuming excess memory.
• Convenient File Formats: Work seamlessly with modern Web APIs.
  • Work with large files efficiently via ReadableStream.
  • Access the entire file as ArrayBuffer, Blob, or File.
• Simple Metadata Access: Retrieve critical file information with minimal effort.
  • Retrieve file name, type, size, and last modified time.
  • Access metadata as HTTP-style headers and preconfigured responses.
• Vite Integration: Built specifically for Vite, ensuring seamless integration.
  • Includes automatic TypeScript typings for ?file imports.

Installation

Install the plugin:

npm install @astropub/vite-plugin-file

Add the plugin to your Vite configuration file:

// vite.config.js
import vitePluginFile from "@astropub/vite-plugin-file"

export default {
  plugins: [vitePluginFile()]
}

Usage

Add the ?file suffix to any file import to access its metadata and contents.

import FaviconIco from "./assets/favicon.ico?file"

File Metadata

Retrieve basic metadata about any file.

import FaviconIco from "./assets/favicon.ico?file"

console.log(FaviconIco.name)         // "favicon.ico"
console.log(FaviconIco.type)         // "image/x-icon"
console.log(FaviconIco.size)         // 9608
console.log(FaviconIco.lastModified) // 1735689600000

File Stream

Stream any file efficiently without loading it into memory.

import FaviconIco from "./assets/favicon.ico?file"

const stream = FaviconIco.stream() // ReadableStream

const response = FaviconIco.response() // Response (with pre-configured headers)

Full File Access

Access the file as ArrayBuffer, Blob, or File.

import FaviconIco from "./assets/favicon.ico?file"

const buffer = await FaviconIco.arrayBuffer()
console.log(buffer.byteLength) // 9608

const blob = await FaviconIco.blob()
console.log(blob.type)         // "image/x-icon"

const file = await FaviconIco.file()
console.log(file.name)         // "favicon.ico"
console.log(file.lastModified) // 1735689600000

File Metadata as Headers

Retrieve the file metadata as HTTP-style headers.

import FaviconIco from "./assets/favicon.ico?file"

const headers = FaviconIco.headers()
console.log(headers.get("content-type"))   // "image/x-icon"
console.log(headers.get("content-length")) // "9608"
console.log(headers.get("last-modified"))  // "Wed, 01 Jan 2025 00:00:00 GMT"

License

Licensed under the MIT-0 License.

Enjoy!