export different file types

playground/app.vue

@@ -27,7 +27,7 @@
 					<!-- <input type="file" id="images" accept="image/*" required> -->
 					<input
 						id="file-input"
-						:ref="fileInput"
+						ref="fileInput"
 						type="file"
 						name="files[]"
 						multiple
@@ -39,7 +39,7 @@
 				<p>{{ approveUpload }}</p>
 			</div>
 			<div class="images">
-				<img v-for="file in files" :key="file.name" :src="file.content" alt="file.name" />
+				<img v-for="file in files" :key="file.name" :src="(file.content as string)" alt="file.name" />
 			</div>
 	</div>
 	</div>

playground/server/api/files.ts

@@ -1,16 +1,10 @@
+import type { ServerFile } from '../../../src/types'
+
 export default defineEventHandler(async (event) => {
-	const { files } = await readBody<{ files: File[] }>(event)
+	const { files } = await readBody<{ files: ServerFile[] }>(event)
 	const fileNames: string[] = []
 	for (const file of files) {
 		fileNames.push(await storeFileLocally(file, 12, '/specificFolder'))
 	}
 	return fileNames
 })
-
-interface File {
-	name: string
-	content: string
-	size: string
-	type: string
-	lastModified: string
-}

src/module.ts

@@ -9,11 +9,8 @@ import {
 import defu from 'defu'
 import { version } from '../package.json'
 
-//? Module options TypeScript interface definition
-export interface ModuleOptions {
-	mount: string
-	version: string
-}
+import type { ModuleOptions } from './types'
+export type * from './types'
 
 export default defineNuxtModule<ModuleOptions>({
 	meta: {

src/runtime/composables/useFileStorage.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+import type { ClientFile } from '../../types'
 
 export default function () {
 	const files = ref<ClientFile[]>([])
@@ -24,7 +25,6 @@ export default function () {
 	}
 
 	const handleFileInput = async (event: any) => {
-		files.value.splice(0)
 
 		const promises = []
 		for (const file of event.target.files) {

src/runtime/server/utils/storage.ts

@@ -1,12 +1,13 @@
 import { writeFile, rm, mkdir } from 'fs/promises'
 import { useRuntimeConfig } from '#imports'
+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 const storeFileLocally = async (
 	file: ServerFile,
@@ -26,13 +27,18 @@ export const storeFileLocally = async (
 
 	await mkdir(`${location}${filelocation}`, { recursive: true })
 
-	await writeFile(`${location}${filelocation}/${filename}`, binaryString, {
+	await writeFile(`${location}${filelocation}/${filename}`, binaryString as any, {
 		flag: 'w',
 	})
 
 	return filename
 }
 
+/**
+ *
+ * @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 const deleteFile = async (filename: string, filelocation: string = '') => {
 	const location = useRuntimeConfig().public.fileStorage.mount
 	await rm(`${location}${filelocation}/${filename}`)

src/types.d.ts

@@ -0,0 +1,18 @@
+export interface ServerFile {
+	name: string
+	content: string
+	size: string
+	type: string
+	lastModified: string
+}
+
+export interface ClientFile extends Blob {
+	content: string | ArrayBuffer | null | undefined
+	name: string
+	lastModified: number
+}
+
+export interface ModuleOptions {
+	mount: string
+	version: string
+}