Laravel + Vue 3: Upload files with categories - axios

Question

I'm working on uploading multiple files using Laravel and Vue 3. File uploading is doing fine until I added a select tag in the form for the category. I put the category and files into one object so I can pass only 1 parameter. Now in TestController I can get the value of category but giving me error in files.
I need to:
Pass category and files
Read category and files so I can move and save info to database
test.vue
<form #submit.prevent="upload" enctype="multipart/form-data">
<!-- added this tag for category -->
<select v-model="category">
<option v-for="type in categories" :key="type.id" :value="type.id">
{{ type.name }}
</option>
</select>
<input type="file" multiple #change="fileChange">
<button type="submit">Upload</button>
</form>
<script>
import useTest from "../composables/test.js"
import { onMounted } from 'vue'
export default {
setup() {
const { categories, getCategories, uploadFile } = useTest()
onMounted(getCategories)
const attachments = []
const category = 1 // added for category
const upload = async () => {
// const formData = new FormData // without category
// with category, I put inside an object so I can pass only 1 parameter
const form = {
category: category.value,
files: new FormData,
}
// loop to append
Object.keys(attachments).forEach(
// key => formData.append(key, attachments[key]) // without category
key => form.files.append(key, attachments[key]) // with category
)
// call from composable
await uploadFile(form)
}
return {
categories,
category,
upload,
}
},
}
</script>
composable: test.js
import { ref } from 'vue'
import axios from 'axios'
export default function useTest() {
const categories = ref([])
const getCategories = async () => {
let response = await axios.get("/api/fileUpload/")
categories.value = response.data.categories
}
const uploadFile = async (form) => {
// METHOD IS INSIDE TRY CATCH BLOCK
const config = {headers: { 'content-type': 'multipart/form-data' }}
// let response = await axios.post("/api/fileUpload/", form, config)
let response = await axios.post("/api/fileUpload/", form)
console.log(response);
}
return {
categories,
getCategories,
uploadFile,
}
}
TestController
public function store(Request $request)
{
// $uploadFiles = $request; // without category
$uploadFiles = $request['files']; // with category
$uploadFiles = $request['category'];
error_log($uploadFiles);
// error here: Attempt to read property \"files\" on array
foreach ($uploadFiles->file as $file) {
error_log('here');
error_log($file->getClientOriginalName());
error_log($file->getClientOriginalExtension());
error_log($file->getSize());
error_log($file->getMimeType());
error_log(date("m/d/Y H:i:s.",filemtime($file)));
error_log('---------------------');
}
return response()->json(['status'=>'success'], status: 200);
}