nuxt-file-storage 0.3.2 → 0.3.3-beta.1

package/README.md

@@ -5,8 +5,8 @@
 <!-- [![Visits Badge](https://badges.pufler.dev/visits/nyllre/nuxt-file-storage)](https://badges.pufler.dev) -->
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![nuxt.care health](https://img.shields.io/endpoint?url=https://nuxt.care/api/badge/nuxt-file-storage&style=flat&colorA=18181B&colorB=28CF8D)](https://nuxt.care/?search=nuxt-file-storage)
 [![License][license-src]][license-href]
+[![nuxt.care health](https://img.shields.io/endpoint?url=https://nuxt.care/api/badge/nuxt-file-storage&style=flat&colorA=18181B&colorB=28CF8D)](https://nuxt.care/?search=nuxt-file-storage)
 [![Nuxt][nuxt-src]][nuxt-href]
 
 Easy 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.
@@ -84,6 +84,20 @@ You can use Nuxt Storage to get the files from the `<input>` tag:
 ```
 The `files` return a ref object that contains the files
 
+The `clearFiles` function empties the files list without needing to reassign `files.value = []`. It also accepts an optional `Ref<HTMLInputElement | null>` to clear the file input element in the DOM:
+
+```html
+<template>
+	<input type="file" ref="fileInputRef" @input="handleFileInput" multiple />
+	<button @click="clearFiles(fileInputRef)">Clear</button>
+</template>
+
+<script setup>
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const { handleFileInput, clearFiles } = useFileStorage()
+</script>
+```
+
 > `handleFileInput` returns a promise in case you need to check if the file input has concluded
 
 <br>
@@ -131,10 +145,57 @@ You have to create a new instance of `useFileStorage` for each input field
 ```
 by calling a new `useFileStorage` instance you separate the internal logic between the inputs
 
+<br>
+
+#### Using with `defineExpose`
+
+The `files` ref is iterable, so it works naturally with `defineExpose` in child components:
+
+```html
+<!-- Child Component -->
+<template>
+	<input type="file" @input="handleFileInput" multiple />
+</template>
+
+<script setup>
+const { handleFileInput, files, clearFiles } = useFileStorage()
+
+defineExpose({
+	files,
+	handleFileInput,
+	clearFiles,
+})
+</script>
+```
+
+```html
+<!-- Parent Component -->
+<template>
+	<ChildComponent ref="childRef" />
+	<button @click="iterateFiles">Show Files</button>
+</template>
+
+<script setup>
+const childRef = ref()
+
+const iterateFiles = () => {
+	// Direct iteration — no double .value needed
+	for (const file of childRef.value.files) {
+		console.log(file.name)
+	}
+
+	// Traditional .value access still works
+	console.log(childRef.value.files.value)
+}
+</script>
+```
+
+<br>
+
 ### Handling files in the backend
 using Nitro Server Engine, we will make an api route that receives the files and stores them in the folder `userFiles`
 ```ts
-import { ServerFile } from "nuxt-file-storage";
+import { ServerFile } from "#file-storage/types";
 
 export default defineEventHandler(async (event) => {
 	const { files } = await readBody<{ files: ServerFile[] }>(event)
@@ -188,11 +249,11 @@ npm run dev
 
 <!-- Badges -->
 
-[npm-version-src]: https://img.shields.io/npm/v/nuxt-file-storage/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/nuxt-file-storage
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-file-storage.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/nuxt-file-storage
-[license-src]: https://img.shields.io/npm/l/nuxt-file-storage.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/nuxt-file-storage
+[npm-version-src]: https://npmx.dev/api/registry/badge/version/nuxt-file-storage
+[npm-version-href]: https://npmx.dev/package/nuxt-file-storage
+[npm-downloads-src]: https://npmx.dev/api/registry/badge/downloads-year/nuxt-file-storage
+[npm-downloads-href]: https://npmx.dev/package/nuxt-file-storage
+[license-src]: https://npmx.dev/api/registry/badge/license/nuxt-file-storage
+[license-href]: https://npmx.dev/package/nuxt-file-storage
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com/modules/nuxt-file-storage

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-file-storage",
   "configKey": "fileStorage",
-  "version": "0.3.2",
+  "version": "0.3.3-beta.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/composables/useFileStorage.d.ts

@@ -1,9 +1,10 @@
+import { type Ref } from 'vue';
 type Options = {
     clearOldFiles: boolean;
 };
 export default function (options?: Options): {
-    files: import("vue").Ref<any, any>;
+    files: Ref<ClientFile[], ClientFile[]> & Iterable<ClientFile>;
     handleFileInput: (event: any) => Promise<void>;
-    clearFiles: () => void;
+    clearFiles: (fileInputRef?: Ref<HTMLInputElement | null>) => void;
 };
 export {};

package/dist/runtime/composables/useFileStorage.js

@@ -1,6 +1,17 @@
-import { ref } from "vue";
+import { ref, unref } from "vue";
+function createIterableRef(initialValue) {
+  const refObj = ref(initialValue);
+  Object.defineProperty(refObj, Symbol.iterator, {
+    value: function* () {
+      yield* refObj.value;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  return refObj;
+}
 export default function(options = { clearOldFiles: true }) {
-  const files = ref([]);
+  const files = createIterableRef([]);
   const serializeFile = (file) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -21,8 +32,12 @@ export default function(options = { clearOldFiles: true }) {
       reader.readAsDataURL(file);
     });
   };
-  const clearFiles = () => {
+  const clearFiles = (fileInputRef) => {
     files.value.splice(0, files.value.length);
+    const el = fileInputRef ? unref(fileInputRef) : null;
+    if (el) {
+      el.value = "";
+    }
   };
   const handleFileInput = async (event) => {
     if (options.clearOldFiles) {

package/package.json

@@ -1,20 +1,20 @@
 {
 	"name": "nuxt-file-storage",
-	"version": "0.3.2",
+	"version": "0.3.3-beta.1",
 	"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.",
-	"repository": "NyllRE/nuxt-file-storage",
 	"license": "MIT",
+	"repository": "NyllRE/nuxt-file-storage",
+	"files": [
+		"dist"
+	],
 	"type": "module",
+	"main": "./dist/module.mjs",
 	"exports": {
 		".": {
 			"types": "./dist/types.d.mts",
 			"import": "./dist/module.mjs"
 		}
 	},
-	"main": "./dist/module.mjs",
-	"files": [
-		"dist"
-	],
 	"scripts": {
 		"prepack": "nuxt-module-build build",
 		"dev": "nuxi dev playground",
@@ -25,6 +25,7 @@
 		"lint": "oxlint .",
 		"test": "vitest run",
 		"test:watch": "vitest watch",
+		"test:ui": "vitest --ui",
 		"changelogen": "changelogen"
 	},
 	"dependencies": {
@@ -36,7 +37,7 @@
 		"@nuxt/eslint-config": "^1.13.0",
 		"@nuxt/module-builder": "^1.0.2",
 		"@nuxt/schema": "^4.3.0",
-		"@nuxt/test-utils": "^3.23.0",
+		"@nuxt/test-utils": "^4.0.0",
 		"@types/node": "^20.17.19",
 		"@vitest/ui": "4.0.16",
 		"@vue/test-utils": "^2.4.6",