Laravel Attach Files Duplicates Database Record

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,