{"id":25268743,"url":"https://github.com/md-asikuzzaman/next-img-base64ify","last_synced_at":"2026-02-13T22:43:02.653Z","repository":{"id":239581498,"uuid":"799929695","full_name":"Md-Asikuzzaman/next-img-base64ify","owner":"Md-Asikuzzaman","description":"A package for handling base64 encoding and decoding in React.js/Next.js applications","archived":false,"fork":false,"pushed_at":"2025-02-03T11:27:01.000Z","size":64,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T10:16:57.520Z","etag":null,"topics":["file-upload","html-files","next-img-base64ify","nextjs","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/next-img-base64ify","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Md-Asikuzzaman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-13T11:31:50.000Z","updated_at":"2025-02-05T14:44:55.000Z","dependencies_parsed_at":"2024-05-13T13:09:02.096Z","dependency_job_id":"a8dc95ae-87af-4ca3-90e1-e415054e83b1","html_url":"https://github.com/Md-Asikuzzaman/next-img-base64ify","commit_stats":null,"previous_names":["md-asikuzzaman/next-file-64ify","md-asikuzzaman/next-img-base64ify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Asikuzzaman%2Fnext-img-base64ify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Asikuzzaman%2Fnext-img-base64ify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Asikuzzaman%2Fnext-img-base64ify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Asikuzzaman%2Fnext-img-base64ify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Md-Asikuzzaman","download_url":"https://codeload.github.com/Md-Asikuzzaman/next-img-base64ify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436142,"owners_count":20938532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-upload","html-files","next-img-base64ify","nextjs","reactjs","typescript"],"created_at":"2025-02-12T10:33:15.224Z","updated_at":"2026-02-13T22:42:57.614Z","avatar_url":"https://github.com/Md-Asikuzzaman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## next-img-base64ify 📁\n\nThe **\"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.\n\n## Installation:\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/Md-Asikuzzaman/next-img-base64ify)\n\n```bash\nnpm i next-img-base64ify\n# or\nyarn add next-img-base64ify\n# or\npnpm i next-img-base64ify\n```\n\n## Quick Start:\n\n#### ✔ Simply connect with your Next.js or React.js application 🤝.\n\n```js\n'use client';\n\nimport React, { useState } from 'react';\nimport { _64ify } from 'next-img-base64ify';\n\nconst MyFileUpload = () =\u003e {\n  const [myFile, setMyFile] = useState\u003cFile | null\u003e(null);\n\n  const handleSubmit = async (e: React.FormEvent) =\u003e {\n    e.preventDefault();\n    if (myFile) {\n      const { data, isLoading, isError, isValidSize } = await _64ify(myFile, {\n        allowedSizes: {\n          minSize: 10,\n          maxSize: 2048,\n        },\n        allowedTypes: ['image/jpeg', 'image/png'],\n      });\n      console.log({ data, isLoading, isError, isValidSize });\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n    if (e.target.files) {\n      setMyFile(e.target.files[0]);\n    }\n  };\n\n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cinput\n        type='file'\n        accept='image/jpeg, image/png'\n        onChange={handleChange}\n      /\u003e\n      \u003cbutton type='submit'\u003eUpload File\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n\nexport default MyFileUpload;\n```\n\n## Customizing File Types and Sizes:\n\n#### ✔ 1. Set File Size Limits\n\n```js\nconst { data, isLoading, isError, isValidSize } = await _64ify(myFile, {\n allowedSizes: {\n  minSize: 1024, // file size in KB\n  maxSize: 1024 * 5, // file size in MB\n },\n ...\n});\n```\n\n#### ✔ 2. Add More Allowed File Types (for the package)\n\n```js\nconst { data, isLoading, isError, isValidSize } = await _64ify(myFile, {\n allowedTypes: [\"image/jpeg\", \"image/png\", \"image/webp\"],\n ...\n});\n```\n\n#### ✔ 3. Update File Input to Accept More Types (for the browser)\n\n```js\n\u003cinput type=\"file\" accept=\"image/jpeg, image/png, \"image/webp\", ...\"/\u003e\n```\n\n#### ✔ Most commonly used file types.\n\n```js\n// Copy and paste what you need 😊\n{\n  \"image/jpeg\",\n  \"image/png\",\n  \"image/svg+xml\",\n  \"image/gif\",\n  \"image/webp\",\n  \"image/bmp\",\n  \"image/tiff\",\n  \"image/x-icon\",\n  \"image/vnd.microsoft.icon\",\n  \"image/vnd.wap.wbmp\",\n  \"image/heic\",\n  \"image/heif\",\n  \"image/jxr\",\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmd-asikuzzaman%2Fnext-img-base64ify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmd-asikuzzaman%2Fnext-img-base64ify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmd-asikuzzaman%2Fnext-img-base64ify/lists"}