JSPM – next-img-base64ify@1.0.0

Package Exports

next-img-base64ify
next-img-base64ify/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-img-base64ify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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:

GitHub package.json version

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 🤝.

'use client';

import React, { useState } from 'react';
import { _64ify } from 'next-img-base64ify';

const MyFileUpload = () => {
  const [myFile, setMyFile] = useState<File | null>(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<HTMLInputElement>) => {
    if (e.target.files) {
      setMyFile(e.target.files[0]);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type='file'
        accept='image/jpeg, image/png'
        onChange={handleChange}
      />
      <button type='submit'>Upload File</button>
    </form>
  );
};

export default MyFileUpload;

Customizing File Types and Sizes:

✔ 1. Set File Size Limits

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)

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)

<input type="file" accept="image/jpeg, image/png, "image/webp", ..."/>

✔ Most commonly used file types.

// 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",
}