Laravel Attach Files Duplicates Database Record - mysql

Question

I am using: Laravel, Vue JS, dropzone.
Works fine with one file being uploaded but when 3 files are uploaded it create a new homework record, like so:
Homework ID: 1, Files: 1, 2
Homework ID: 2, Files: 3
Should look like:
Homework ID: 1, Files: 1,2,3
Code for upload is the following:
public function store() {
$data = request()->validate([
'title' => '',
'description' => '',
'start_date' => '',
'due_date' => '',
'group_id' => '',
'dropzonefile' => '',
'live_status' => '',
]);
// Create homework record...
$task = request()->user()->homeworks()->create([
'title' => $data['title'],
'description' => $data['description'],
'start_date' => $data['start_date'],
'due_date' => $data['due_date'],
'live_status' => $data['live_status'],
]);
// Add homework to some groups...
$task->groups()->attach(Arr::pluck(json_decode($data['group_id']), 'group_id'));
// Upload all files...
if (isset($data['dropzonefile'])) {
foreach ($data['dropzonefile'] as $attachment) {
$attachmentName = $attachment->store('userFiles', 'public');
$attachmentInfo = request()->user()->attachments()->create([
'reference_name' => $attachmentName,
'original_file_name' => $attachment->getClientOriginalName(),
]);
$task->attachments()->attach($attachmentInfo->id);
}
}
return new TaskResource($task);
}
Front End Code:
dropzoneOptions: {
paramName: "dropzonefile",
url: '/api/homework',
thumbnailWidth: 150,
maxFilesize: 20,
maxFiles: 5,
addRemoveLinks: true,
uploadMultiple: true,
autoProcessQueue: false,
headers: {
'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content,
},
sending: (file, xhr, formData) => {
formData.append('title', this.taskTitle);
formData.append('description', this.content);
formData.append('start_date', this.selectedSetDate);
formData.append('due_date', this.selectedDueDate);
formData.append('group_id', JSON.stringify(this.value));
formData.append('live_status', this.liveStatus);
},
success: (event, res) => {
// alert('success');
console.log(event);
this.makeToast(true,'info');
this.$router.push('/Teacher')
}
},

Answer 1

I think I found the answer:
upload multiple files in one request Dropzone sending two requests
Seems like I was missing some dropzone options:
autoDiscover: false,
parallelUploads: 10,