Ajax File Upload calling wrong controller function

I have an ajax file upload in my form. It works when it's in /create blade file.

However, it doesn't work in /edit.

it seems like data.submit() calls the update() function instead of upload() function.

The error I get is No query results for model [App\\Models\\RecordName], which is pointing to update() in controller.

it's based on this tutorial https://laraveldaily.com/laravel-ajax-file-upload-blueimp-jquery-library/

<!-- Form -->
<form action="{{ route("form.update", [$record->slug()]) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PATCH')
...

<!-- File Upload -->
<div class="form-group">
<label for="file_upload">File Upload</label>
<input type="file" id="file_upload" name="attachments[]" data-url="{{ route('file.upload') }}" multiple />
  <input type="hidden" name="file_ids" id="file_ids" value="">
</div>


<!-- JS Section -->
<script>
    $(function () {
        $('#file_upload').fileupload({
            dataType: 'json',
            add: function (e, data) {
                $('#loading').text('Uploading...');
                data.submit();
            },
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<ul>');
                    $('<li class="filename" />').html(file.name + ' (' + file.size + ' KB)').appendTo($('#files_list'));
                    $('</ul>');
                    if ($('#file_ids').val() != '') {
                        $('#file_ids').val($('#file_ids').val() + ',');
                    }
                    $('#file_ids').val($('#file_ids').val() + file.fileID);
                });
                $('#loading').text('');
            }
        });
    });
</script>