nuxt-file-storage 0.2.8 → 0.2.9

package/README.md

@@ -77,15 +77,17 @@ You can use Nuxt Storage to get the files from the `<input>` tag:
 
 <script setup>
 	// handleFileInput can handle multiple files
-	const { handleFileInput, files } = useFileStorage()
+	// clearOldFiles: true by default, each time the user adds files the `files` ref will be cleared
+	const { handleFileInput, files } = useFileStorage({ clearOldFiles: false })
 </script>
 ```
 The `files` return a ref object that contains the files
 
 > `handleFileInput` returns a promise in case you need to check if the file input has concluded
 
+<br>
 
-Here's an example of using files to send them to the backend:
+Here's an example of using files to send them to the backend
 ```html
 <template>
 	<input type="file" @input="handleFileInput" />
@@ -105,7 +107,28 @@ const submit = async () => {
 }
 </script>
 ```
+<br>
 
+#### Handling multiple file input fields
+You have to create a new instance of `useFileStorage` for each input field
+
+
+```html
+<template>
+	<input type="file" @input="handleFileInput" multiple />   ← | 1 |
+	<input type="file" @input="profileInputHandler" />                 ← | 2 |
+</template>
+
+<script setup>
+	const { handleFileInput, files } = useFileStorage()       ← | 1 |
+
+	const {
+		handleFileInput: profileInputHandler,
+		files: profileImage
+	} = useFileStorage()                                               ← | 2 |
+</script>
+```
+by calling a new `useFileStorage` instance you seperate the internal logic between the inputs
 
 ### Handling files in the backend
 using Nitro Server Engine, we will make an api route that recieves the files and stores them in the folder `userFiles`

package/dist/module.d.mts

@@ -1,9 +1,24 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+interface ServerFile {
+	name: string
+	content: string
+	size: string
+	type: string
+	lastModified: string
+}
+
+interface ClientFile extends Blob {
+	content: string | ArrayBuffer | null | undefined
+	name: string
+	lastModified: number
+}
+
 interface ModuleOptions {
-    mount: string;
-    version: string;
+	mount: string
+	version: string
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { type ModuleOptions, _default as default };
+export { type ClientFile, type ModuleOptions, type ServerFile, _default as default };

package/dist/module.d.ts

@@ -1,9 +1,24 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+interface ServerFile {
+	name: string
+	content: string
+	size: string
+	type: string
+	lastModified: string
+}
+
+interface ClientFile extends Blob {
+	content: string | ArrayBuffer | null | undefined
+	name: string
+	lastModified: number
+}
+
 interface ModuleOptions {
-    mount: string;
-    version: string;
+	mount: string
+	version: string
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { type ModuleOptions, _default as default };
+export { type ClientFile, type ModuleOptions, type ServerFile, _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-file-storage",
   "configKey": "fileStorage",
-  "version": "0.2.8"
+  "version": "0.2.9"
 }

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, logger, createResolver, addImportsDir, addServerScanDir } from '@nuxt/kit';
 import defu from 'defu';
 
-const version = "0.2.8";
+const version = "0.2.9";
 
 const module = defineNuxtModule({
   meta: {

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

@@ -1,4 +1,22 @@
-export default function (): {
-    files: import("vue").Ref<any[]>;
+type Options = {
+    clearOldFiles: boolean;
+};
+export default function (options?: Options): {
+    files: import("vue").Ref<{
+        content: string | {
+            readonly byteLength: number;
+            slice: (begin: number, end?: number | undefined) => ArrayBuffer;
+            readonly [Symbol.toStringTag]: string;
+        } | null | undefined;
+        name: string;
+        lastModified: number;
+        readonly size: number;
+        readonly type: string;
+        arrayBuffer: () => Promise<ArrayBuffer>;
+        slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob;
+        stream: () => ReadableStream<Uint8Array>;
+        text: () => Promise<string>;
+    }[]>;
     handleFileInput: (event: any) => Promise<void>;
 };
+export {};

package/dist/runtime/composables/useFileStorage.mjs

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-export default function() {
+export default function(options = { clearOldFiles: true }) {
   const files = ref([]);
   const serializeFile = (file) => {
     return new Promise((resolve, reject) => {
@@ -22,7 +22,9 @@ export default function() {
     });
   };
   const handleFileInput = async (event) => {
-    files.value.splice(0);
+    if (options.clearOldFiles) {
+      files.value.splice(0, files.value.length);
+    }
     const promises = [];
     for (const file of event.target.files) {
       promises.push(serializeFile(file));

package/dist/runtime/server/utils/storage.d.ts

@@ -1,12 +1,18 @@
 /// <reference types="node" />
+import type { ServerFile } from '../../../types';
 /**
  * #### Will store the file in the specified directory
  * @returns file name: `${filename}`.`${fileExtension}`
- * @prop file: provide the file object
- * @prop fileNameOrIdLength: you can pass a string or a number, if you enter a string it will be the file name, if you enter a number it will generate a unique ID
- * @prop filelocation: provide the folder you wish to locate the file in
+ * @prop `file`: provide the file object
+ * @prop `fileNameOrIdLength`: you can pass a string or a number, if you enter a string it will be the file name, if you enter a number it will generate a unique ID
+ * @prop `filelocation`: provide the folder you wish to locate the file in
  */
 export declare const storeFileLocally: (file: ServerFile, fileNameOrIdLength: string | number, filelocation?: string) => Promise<string>;
+/**
+ *
+ * @param `filename`: the name of the file you want to delete
+ * @param `filelocation`: the folder where the file is located, if it is in the root folder you can leave it empty, if it is in a subfolder you can pass the name of the subfolder with a preceding slash: `/subfolder`
+ */
 export declare const deleteFile: (filename: string, filelocation?: string) => Promise<void>;
 /**
 Parses a data URL and returns an object with the binary data and the file extension.

package/dist/types.d.mts

@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { ModuleOptions, default } from './module.js'
+export type { ClientFile, ModuleOptions, ServerFile, default } from './module.js'

package/dist/types.d.ts

@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { ModuleOptions, default } from './module'
+export type { ClientFile, ModuleOptions, ServerFile, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-file-storage",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "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",