vuejs dropzone uploading to nodejs express - node.js

Question

I'm trying to upload a multipart form with vue3 and dropzone, to my nodejs/express backend and handling it with multer.
My dropzone configuration looks like this:
let files = ref([]);
let dropzoneFile = ref("");
const drop = (e) => {
dropzoneFile.value = e.dataTransfer.files[0];
files.value.push(dropzoneFile.value);
};
const selectedFile = () => {
dropzoneFile.value = document.querySelector(".dropzoneFile").files[0];
files.value.push(dropzoneFile.value);
};
watch(
() => [...files.value],
(currentValue) => {
return currentValue;
}
);
return { dropzoneFile, files, drop, selectedFile, v$: useVuelidate(), getAccessTokenSilently };
And from my template:
<DropZone #drop.prevent="drop" #change="selectedFile" />
<ul class="list-unstyled mb-0" id="dropzone-preview">
<div
class="border rounded"
v-for="(file, index) of files"
:key="index"
>
<div class="d-flex p-2">
<div class="flex-grow-1">
<div class="pt-1">
<h5 class="fs-14 mb-1" data-dz-name="">
{{ file.name }}
</h5>
<p class="fs-13 text-muted mb-0" data-dz-size="">
<strong>{{ file.size / 1024 }}</strong> KB
</p>
<strong
class="error text-danger"
data-dz-errormessage=""
></strong>
</div>
</div>
<div class="flex-shrink-0 ms-3">
<button
data-dz-remove=""
class="btn btn-sm btn-danger"
#click.prevent="deleteRecord"
>
Delete
</button>
</div>
</div>
</div>
</ul>
My posting method:
async add(){
console.log(this.files);
this.name = this.$refs.name.value
this.type = this.$refs.type.value
this.description = this.$refs.description.value
let formData = new FormData();
formData.append('name', this.$refs.name.value);
formData.append('type', this.$refs.type.value);
formData.append('description', this.$refs.description.value);
formData.append('files', this.files);
//const accessToken = await this.getAccessTokenSilently();
//const { data, error } = await post(accessToken,formData);
/* (data) {
console.log(data);
this.myAddModal.hide()
}
if (error) {
console.log(error);
}*/
},
The line console.log(this.files);
Prints out the following to my console:
Proxy {0: File, 1: File}
[[Handler]]
:
Object
[[Target]]
:
Array(2)
0
:
File {name: '10128.tiff', lastModified: 1672418629650, lastModifiedDate: Fri Dec 30 2022 17:43:49 GMT+0100 (Central European Standard Time), webkitRelativePath: '', size: 180224, …}
1
:
File {name: 'body.svg', lastModified: 1672659212900, lastModifiedDate: Mon Jan 02 2023 12:33:32 GMT+0100 (Central European Standard Time), webkitRelativePath: '', size: 825329, …}
length
:
2
[[Prototype]]
:
Array(0)
[[IsRevoked]]
:
false
The receiving code at my node/express backend looks like this:
Router.post("/add", upload.array('files'), validateAccessToken, (req, res) => {
Multer doesn't save the files and I'm having a hard time understanding the format the files are being send to the server?
Is there something wrong with the format the files are being send to the server?