Frontend Usage

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

<script setup>
    const { handleFileInput, files } =
        useFileStorage({
            deleteOldFiles: true,
            storageMode: 'DataURL'
        })
</script>

handleFileInput handles multiple files by default

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

You can modify two things about the composable

deleteOldFiles

Will reset the files ref each time the user adds files to the input field. true by default

storageMode

You can store files in two modes, DataURL and Multipart, the main difference is based on the use case. DataURL by default

• DataURL: If you want to store data along the files in your form you can use DataURL and add it to the json request. Learn more
• Multipart: This mode is more traditional and mainly focuses on forms. Learn more

then you upload the files like this:

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

    body: files,        // if you use the Multipart mode

    body: {             // if you use the DataURL mode
      files: files.value,
      ...
    }

  })

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.