I am utilizing a v-file-input to manage certain documents. However, whenever a user attempts to add additional files by selecting them, it ends up wiping out the previous files. Ideally, I would like the v-file-input to be able to accumulate files and only allow clearing of values through the clearable icon.
<v-file-input
v-model="supportingDocumentsModel"
:show-size="1000"
color="primary"
label="Rate Supporting Documents"
placeholder="Select your supporting documents"
prepend-inner-icon="mdi-file"
prepend-icon=""
variant="outlined"
counter
comfortable
multiple
clearable
>
<template v-slot:selection="{ fileNames }">
<template v-for="(fileName) in fileNames" :key="fileName">
<v-chip
class="me-2"
color="blue-accent-4"
size="small"
label
>
{{ fileName }}
</v-chip>
</template>
</template>
</v-file-input>
In an attempt to enhance Yoduh's answer and make it more dynamic:
const updateFiles = (files : File[], persistentFiles : File[]) => {
// Calculate new files by comparing persisted files with latest file selection
const newFiles = files.filter(file1 => {
return !persistentFiles.some(file2 => {
return file1.name === file2.name
})
})
// Set new files to persist
persistentFiles.push(...newFiles)
// Update v-model
files = persistentFiles
}
function clearFiles(files : File[], persistentFiles : File[]) {
persistentFiles = []
files = []
}
Encountering issues while trying to pass models and persistent models as parameters.