Frontend Usage

there are two ways to handle input and they are based on your usage with the files.

Multipart Data Object

This method is the most optimal specifically for file uploading alone:

<template>
    <input type="file" @input="handleFileInput" />
</template>

<script setup>
    const { handleFileInput, files } = useFileStorage()
</script>

files will return a formData object that will be ready for upload

then you upload the files like this:

const response = await $fetch('/api/files', {
    method: 'POST',
    body: files
  })

for handling the backend side of the files check the Multipart Object Method.

Base64 for JSON

This method is more optimal if you want to upload the files with more JSON data:

<template>
    <input type="file" @input="handleJsonFileInput" />
</template>

<script setup>
    const { handleJsonFileInput, jsonFiles } = useFileStorage()
</script>

jsonFiles will return a vue ref list that has the files

This will allow you to upload the files in JSON form with other JSON data:

const response = await $fetch('/api/file', {
  method: 'POST',
  body: {
    // other data
    files: jsonFiles.value
  }
})

For handling the backend side of the files check the Base64 for JSON Method.