{"id":22488970,"url":"https://github.com/NyllRE/nuxt-file-storage","last_synced_at":"2025-08-02T21:32:03.589Z","repository":{"id":220009171,"uuid":"750407734","full_name":"NyllRE/nuxt-file-storage","owner":"NyllRE","description":"Easy solution to store files in your nuxt apps. Be able to upload files from the frontend and recieve them from the backend to then save the files in your project.","archived":false,"fork":false,"pushed_at":"2024-05-18T15:11:48.000Z","size":423,"stargazers_count":32,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-21T02:10:02.428Z","etag":null,"topics":["nitro","npm-package","nuxt","nuxt-module"],"latest_commit_sha":null,"homepage":"https://nuxt.com/modules/nuxt-file-storage","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/NyllRE.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-01-30T15:36:16.000Z","updated_at":"2024-05-28T23:47:27.275Z","dependencies_parsed_at":"2024-04-22T12:55:28.018Z","dependency_job_id":"d377fac9-4a94-4ffb-8d9c-3b49f902de09","html_url":"https://github.com/NyllRE/nuxt-file-storage","commit_stats":null,"previous_names":["nyllre/nuxt-storage","nyllre/nuxt-nitro-storage","nyllre/nuxt-file-storage"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NyllRE%2Fnuxt-file-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NyllRE%2Fnuxt-file-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NyllRE%2Fnuxt-file-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NyllRE%2Fnuxt-file-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NyllRE","download_url":"https://codeload.github.com/NyllRE/nuxt-file-storage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"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":["nitro","npm-package","nuxt","nuxt-module"],"created_at":"2024-12-06T17:18:59.885Z","updated_at":"2025-08-02T21:32:03.556Z","avatar_url":"https://github.com/NyllRE.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Nuxt File Storage Banner](./playground/public/nuxt-file-storage-banner.svg)\n\n# Nuxt File Storage\n\n[![Visits Badge](https://badges.pufler.dev/visits/nyllre/nuxt-file-storage)](https://badges.pufler.dev)\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nEasy solution to store files in your nuxt apps. Be able to upload files from the frontend and receive them from the backend to then save the files in your project.\n\n-  [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n-  [🏀 Online playground](https://stackblitz.com/github/NyllRE/nuxt-file-storage?file=playground%2Fapp.vue)\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Features\n\n\u003c!-- Highlight some of the features your module provide here --\u003e\n\n-  📁 \u0026nbsp;Get files from file input and make them ready to send to backend\n-  ⚗️ \u0026nbsp;Serialize files in the backend to be able to use them appropriately\n-  🖴 \u0026nbsp;Store files in a specified location in your Nuxt backend with Nitro Engine\n\n## Quick Setup\n\n1. Add `nuxt-file-storage` dependency to your project\n\n```bash\n# Using pnpm\npnpm add -D nuxt-file-storage\n\n# Using yarn\nyarn add --dev nuxt-file-storage\n\n# Using npm\nnpm install --save-dev nuxt-file-storage\n```\n\n2. Add `nuxt-file-storage` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n\tmodules: ['nuxt-file-storage'],\n})\n```\n\nThat's it! You can now use Nuxt Storage in your Nuxt app ✨\n\n## Configuration\n\nYou can currently configure a single setting of the `nuxt-file-storage` module. Here is the config interface:\n\n```js\nexport default defineNuxtConfig({\n\tmodules: ['nuxt-file-storage'],\n\tfileStorage: {\n\t\t// enter the absolute path to the location of your storage\n\t\tmount: '/home/$USR/development/nuxt-file-storage/server/files',\n\n\t\t// {OR} use environment variables (recommended)\n\t\tmount: process.env.mount\n\t\t// you need to set the mount in your .env file at the root of your project\n\t},\n})\n```\n\n## Usage\n\n### Handling Files in the frontend\nYou can use Nuxt Storage to get the files from the `\u003cinput\u003e` tag:\n\n```html\n\u003ctemplate\u003e\n\t\u003cinput type=\"file\" @input=\"handleFileInput\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n\t// handleFileInput can handle multiple files\n\t// clearOldFiles: true by default, each time the user adds files the `files` ref will be cleared\n\tconst { handleFileInput, files } = useFileStorage({ clearOldFiles: false })\n\u003c/script\u003e\n```\nThe `files` return a ref object that contains the files\n\n\u003e `handleFileInput` returns a promise in case you need to check if the file input has concluded\n\n\u003cbr\u003e\n\nHere's an example of using files to send them to the backend\n```html\n\u003ctemplate\u003e\n\t\u003cinput type=\"file\" @input=\"handleFileInput\" /\u003e\n\t\u003cbutton @click=\"submit\"\u003esubmit\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst { handleFileInput, files } = useFileStorage()\n\nconst submit = async () =\u003e {\n\tconst response = await $fetch('/api/files', {\n\t\tmethod: 'POST',\n\t\tbody: {\n\t\t\tfiles: files.value\n\t\t}\n\t})\n}\n\u003c/script\u003e\n```\n\u003cbr\u003e\n\n#### Handling multiple file input fields\nYou have to create a new instance of `useFileStorage` for each input field\n\n\n```html\n\u003ctemplate\u003e\n\t\u003cinput type=\"file\" @input=\"handleFileInput\" multiple /\u003e   ← | 1 |\n\t\u003cinput type=\"file\" @input=\"profileInputHandler\" /\u003e                 ← | 2 |\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n\tconst { handleFileInput, files } = useFileStorage()       ← | 1 |\n\n\tconst {\n\t\thandleFileInput: profileInputHandler,\n\t\tfiles: profileImage\n\t} = useFileStorage()                                               ← | 2 |\n\u003c/script\u003e\n```\nby calling a new `useFileStorage` instance you separate the internal logic between the inputs\n\n### Handling files in the backend\nusing Nitro Server Engine, we will make an api route that receives the files and stores them in the folder `userFiles`\n```ts\nimport { ServerFile } from \"nuxt-file-storage\";\n\nexport default defineEventHandler(async (event) =\u003e {\n\tconst { files } = await readBody\u003c{ files: ServerFile[] }\u003e(event)\n\n\tfor ( const file of files ) {\n\t\tawait storeFileLocally(\n\t\t\tfile, \t\t  // the file object\n\t\t\t8,            // you can add a name for the file or length of Unique ID that will be automatically generated!\n\t\t\t'/userFiles'  // the folder the file will be stored in\n\t\t)\n\n\t\t// {OR}\n\n\t\t// Parses a data URL and returns an object with the binary data and the file extension.\n\t\tconst { binaryString, ext } = parseDataUrl(file.content)\n\t}\n\n\t// Deleting Files\n\tawait deleteFile('requiredFile.txt', '/userFiles')\n\n\t// Get file path\n\tawait getFileLocally('requiredFile.txt', '/userFiles')\n\t// returns: {AbsolutePath}/userFiles/requiredFile.txt\n\n\t// Get all files in a folder\n\tawait getFilesLocally('/userFiles')\n})\n```\n\nAnd that's it! Now you can store any file in your nuxt project from the user ✨\n\n## Contribution\nRun into a problem? Open a [new issue](https://github.com/NyllRE/nuxt-file-storage/issues/new). I'll try my best to include all the features requested if it is fitting to the scope of the project.\n\nWant to add some feature? PRs are welcome!\n- Clone this repository\n- install the dependencies\n- prepare the project\n- run dev server\n```bash\ngit clone https://github.com/NyllRE/nuxt-file-storage \u0026\u0026 cd nuxt-file-storage\nnpm i\nnpm run dev:prepare\nnpm run dev\n```\n\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-file-storage/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-file-storage\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-file-storage.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-file-storage\n[license-src]: https://img.shields.io/npm/l/nuxt-file-storage.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-file-storage\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com/modules/nuxt-file-storage\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNyllRE%2Fnuxt-file-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNyllRE%2Fnuxt-file-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNyllRE%2Fnuxt-file-storage/lists"}