nuxt-file-storage 0.2.6 → 0.2.8

package/README.md

@@ -2,12 +2,12 @@
 
 # Nuxt File Storage
 
+[![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]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-
 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.
 
 -  [✨  Release Notes](/CHANGELOG.md)
@@ -82,6 +82,9 @@ You can use Nuxt Storage to get the files from the `<input>` tag:
 ```
 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
+
+
 Here's an example of using files to send them to the backend:
 ```html
 <template>

package/dist/module.json

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

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.6";
+const version = "0.2.8";
 
 const module = defineNuxtModule({
   meta: {
@@ -23,7 +23,7 @@ const module = defineNuxtModule({
       const previousVersion = config.public.fileStorage?.version;
       if (!previousVersion || previousVersion !== version) {
         logger.warn(
-          `There is a breaking change in the \`fileStoreLocally\` method, link to changelog:
+          `There is a breaking change in the \`storeFileLocally\` method, link to changelog:
 https://github.com/NyllRE/nuxt-file-storage/releases/tag/v${version}
 `
         );

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

@@ -1,14 +1,4 @@
 export default function (): {
-    files: import("vue").Ref<{
-        content: any;
-        name: string;
-        lastModified: string;
-        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) => void;
+    files: import("vue").Ref<any[]>;
+    handleFileInput: (event: any) => Promise<void>;
 };

package/dist/runtime/composables/useFileStorage.mjs

@@ -2,25 +2,32 @@ import { ref } from "vue";
 export default function() {
   const files = ref([]);
   const serializeFile = (file) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      files.value.push({
-        ...file,
-        name: file.name,
-        size: file.size,
-        type: file.type,
-        lastModified: file.lastModified,
-        content: e.target.result
-      });
-    };
-    reader.readAsDataURL(file);
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        files.value.push({
+          ...file,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          lastModified: file.lastModified,
+          content: e.target?.result
+        });
+        resolve();
+      };
+      reader.onerror = (error) => {
+        reject(error);
+      };
+      reader.readAsDataURL(file);
+    });
   };
-  const handleFileInput = (event) => {
+  const handleFileInput = async (event) => {
     files.value.splice(0);
-    console.log("handleFileInput event: " + event);
+    const promises = [];
     for (const file of event.target.files) {
-      serializeFile(file);
+      promises.push(serializeFile(file));
     }
+    await Promise.all(promises);
   };
   return {
     files,

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

@@ -6,15 +6,8 @@
  * @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: File, fileNameOrIdLength: string | number, filelocation?: string) => Promise<string>;
+export declare const storeFileLocally: (file: ServerFile, fileNameOrIdLength: string | number, filelocation?: string) => Promise<string>;
 export declare const deleteFile: (filename: string, filelocation?: string) => Promise<void>;
-interface File {
-    name: string;
-    content: string;
-    size: string;
-    type: string;
-    lastModified: string;
-}
 /**
 Parses a data URL and returns an object with the binary data and the file extension.
 @param {string} file - The data URL
@@ -24,4 +17,3 @@ export declare const parseDataUrl: (file: string) => {
     binaryString: Buffer;
     ext: string;
 };
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-file-storage",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/module-builder": "^0.8.3",
     "@nuxt/schema": "^3.9.3",
     "@nuxt/test-utils": "^3.9.0",
     "@types/node": "^20.11.5",