I am trying to generate a preview blob from a multi-file input object called "files". I have the previews object set up correctly, but when I use files.value.map, it is not working as expected. My goal is to attach the blob to the "files" object. Can you help me figure out what I am missing?
const files = ref([])
const previews = ref([])
const toBlob = async(file) => {
const buffer = await file.arrayBuffer()
const blob = new Blob([buffer])
const srcBlob = URL.createObjectURL(blob)
return srcBlob
}
watch(files, async() => {
previews.value = await Promise.all(
files.value.map((file) => toBlob(file))
)
await Promise.all(files.value.map(async(file) => {
console.log(file)
file.preview = await toBlob(file)
}))
})
return {
files,
previews
}
The vue template is displaying blank currently. The console log shows the correct information though.
<span v-for="file in files" :key="file">{{file.preview}}</span>
The following code is functioning properly and showing the preview blob:
<span v-for="preview in previews" :key="preview">{{preview}}</span>