Fix conflicting File name and Promise resolve issue

src/runtime/composables/useFileStorage.ts

@@ -1,47 +1,41 @@
-import { ref } from "vue";
+import { ref } from 'vue'
 
 export default function () {
-	const files = ref<File[]>([])
-	const serializeFile = (file: File) => {
-		const reader = new FileReader()
-		reader.onload = (e: any) => {
-			files.value.push({
-				...file,
-				name: file.name,
-				size: file.size,
-				type: file.type,
-				lastModified: file.lastModified,
-				content: e.target.result,
-			})
-		}
-		reader.readAsDataURL(file)
-	}
-
-	const handleFileInput = (event: any): Promise<void> => {
+	const files = ref<ClientFile[]>([])
+	const serializeFile = (file: ClientFile): Promise<void> => {
 		return new Promise<void>((resolve, reject) => {
-			files.value.splice(0)
-			// console.log('handleFileInput event: ' + event)
-
-			const promises = []
-			for (const file of event.target.files) {
-				promises.push(serializeFile(file))
+			const reader = new FileReader()
+			reader.onload = (e: ProgressEvent<FileReader>) => {
+				files.value.push({
+					...file,
+					name: file.name,
+					size: file.size,
+					type: file.type,
+					lastModified: file.lastModified,
+					content: e.target?.result,
+				})
+				resolve()
 			}
-
-			Promise.all(promises)
-				.then(() => resolve())
-				.catch((error) => reject(error))
+			reader.onerror = (error) => {
+				reject(error)
+			}
+			reader.readAsDataURL(file)
 		})
 	}
 
+	const handleFileInput = async (event: any) => {
+		files.value.splice(0)
+
+		const promises = []
+		for (const file of event.target.files) {
+			promises.push(serializeFile(file))
+		}
+
+		await Promise.all(promises)
+	}
 
 	return {
 		files,
 		handleFileInput,
 	}
 }
-
-interface File extends Blob {
-	content: any
-	name: string
-	lastModified: string
-}

src/runtime/server/utils/storage.ts

@@ -9,7 +9,7 @@ import { useRuntimeConfig } from '#imports'
  * @prop filelocation: provide the folder you wish to locate the file in
  */
 export const storeFileLocally = async (
-	file: File,
+	file: ServerFile,
 	fileNameOrIdLength: string | number,
 	filelocation: string = '',
 ): Promise<string> => {
@@ -38,15 +38,6 @@ export const deleteFile = async (filename: string, filelocation: string = '') =>
 	await rm(`${location}${filelocation}/${filename}`)
 }
 
-interface File {
-	name: string
-	content: string
-	size: string
-	type: string
-	lastModified: string
-}
-
-
 const generateRandomId = (length: number) => {
 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
 	let randomId = ''

types/types.d.ts

@@ -0,0 +1,13 @@
+interface ServerFile {
+	name: string
+	content: string
+	size: string
+	type: string
+	lastModified: string
+}
+
+interface ClientFile extends Blob {
+	content: string | ArrayBuffer
+	name: string
+	lastModified: number
+}