https://github.com/md-asikuzzaman/next-img-base64ify
A package for handling base64 encoding and decoding in React.js/Next.js applications
https://github.com/md-asikuzzaman/next-img-base64ify
file-upload html-files next-img-base64ify nextjs reactjs typescript
Last synced: 5 months ago
JSON representation
A package for handling base64 encoding and decoding in React.js/Next.js applications
- Host: GitHub
- URL: https://github.com/md-asikuzzaman/next-img-base64ify
- Owner: Md-Asikuzzaman
- License: mit
- Created: 2024-05-13T11:31:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-03T11:27:01.000Z (over 1 year ago)
- Last Synced: 2025-03-13T10:16:57.520Z (over 1 year ago)
- Topics: file-upload, html-files, next-img-base64ify, nextjs, reactjs, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/next-img-base64ify
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## next-img-base64ify 📁
The **"next-img-base64ify"** package simplifies file handling in **Next.js/React.js** applications by converting selected files to **base64** strings. It provides easy-to-use functions for validating file types and sizes, ensuring smooth and efficient file uploads. It is ideal for image files and integrates seamlessly with React components for streamlined file management.
## Installation:
```bash
npm i next-img-base64ify
# or
yarn add next-img-base64ify
# or
pnpm i next-img-base64ify
```
## Quick Start:
#### ✔ Simply connect with your Next.js or React.js application 🤝.
```js
'use client';
import React, { useState } from 'react';
import { _64ify } from 'next-img-base64ify';
const MyFileUpload = () => {
const [myFile, setMyFile] = useState(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (myFile) {
const { data, isLoading, isError, isValidSize } = await _64ify(myFile, {
allowedSizes: {
minSize: 10,
maxSize: 2048,
},
allowedTypes: ['image/jpeg', 'image/png'],
});
console.log({ data, isLoading, isError, isValidSize });
}
};
const handleChange = (e: React.ChangeEvent) => {
if (e.target.files) {
setMyFile(e.target.files[0]);
}
};
return (
Upload File
);
};
export default MyFileUpload;
```
## Customizing File Types and Sizes:
#### ✔ 1. Set File Size Limits
```js
const { data, isLoading, isError, isValidSize } = await _64ify(myFile, {
allowedSizes: {
minSize: 1024, // file size in KB
maxSize: 1024 * 5, // file size in MB
},
...
});
```
#### ✔ 2. Add More Allowed File Types (for the package)
```js
const { data, isLoading, isError, isValidSize } = await _64ify(myFile, {
allowedTypes: ["image/jpeg", "image/png", "image/webp"],
...
});
```
#### ✔ 3. Update File Input to Accept More Types (for the browser)
```js
```
#### ✔ Most commonly used file types.
```js
// Copy and paste what you need 😊
{
"image/jpeg",
"image/png",
"image/svg+xml",
"image/gif",
"image/webp",
"image/bmp",
"image/tiff",
"image/x-icon",
"image/vnd.microsoft.icon",
"image/vnd.wap.wbmp",
"image/heic",
"image/heif",
"image/jxr",
}
```