Gagal upload foto menggunakan laravel 9, validation jquery, dan ajax

Kenapa setiap kali saya submit form, selalu muncul error seperti ini?

{message: "validation.required (and 2 more errors)",}
errors: {first_name: ["validation.required"], last_name: ["validation.required"],}
message: "validation.required (and 2 more errors)"

Ini controller saya:

public function store(Request $request)
{
$request->validate([
'first_name' => 'required',
'last_name' => 'required',
'image' => 'required|mimes:jpg,jpeg,png|max:1024',
]);

$file = Request()->file('image');
$file_name = Str::random(20) . '.' . $file->getClientOriginalExtension();
$file->move(public_path('images'), $file_name);

$form_data = [
'first_name' => $request->first_name,
'last_name' => $request->last_name,
'image' => $file_name
];

AjaxCrud::create($form_data);
return response()->json(['success' => 'Data added successfully.']);
}

Route:

Route::get('/', [AjaxCrudController::class, 'index']);
Route::resource('ajax-crud', AjaxCrudController::class);

Form:

<div class="modal fade" id="addmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form action="javascript:void(0)" name="addmodal" id="addform" class="form-horizontal"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="first_name" class="form-label">First Name</label>
                            <input type="text" class="form-control" name="first_name" id="first_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="last_name" class="form-label">Last Name</label>
                            <input type="text" class="form-control" name="last_name" id="last_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="image" class="form-label">Select Profile Image</label>
                            <input type="file" class="form-control" name="image" id="image" required>
                        </div>
                        <div class="modal-footer">
                            <input type="submit" name="addbutton" id="addbutton" class="btn btn-primary" value="Add" />
                            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

Script:

<script>
        $(document).ready(function(){

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Add modal
            $('#create_record').click(function(){
                $('#addmodal').modal('show');
                $('.modal-title').text('Add New Record');
                $('#addbutton').val('Add');
                $('#addaction').val('Add');
            });

            // Save Data
            if ($('#addform').length > 0) {
                $('#addform').validate({
                            rules: {
                                first_name: 'required',
                                last_name: 'required',
                                image: 'required',
                            },
                            messages: {
                                first_name: 'First name required!',
                                last_name: 'Last name required!',
                                image: 'Image required!',
                            },
                submitHandler: function (form) {

                    event.preventDefault();
                        $.ajax({
                            data: $('#addform').serialize(),
                            url:'{{ route('ajax-crud.store') }}',
                            method:'POST',
                            contentType: false,
                            cache:false,
                            processData: false,
                            dataType:'json',
                            success:function(data)
                            {
                                $('#addform')[0].reset();
                                $('#addmodal').modal('hide');
                                $('#user_table').DataTable().ajax.reload();
                                iziToast.success({
                                    title: 'Data added successfully.',
                                    message: '{{ Session('success')}}',
                                    position: 'topCenter'
                                });
                            }
                        })
                    }
                });
            }
        });
    </script>
avatar Catatonic32
@Catatonic32

5 Kontribusi 0 Poin

Dipost 2 tahun yang lalu

Tanggapan

di controller store taru dd($request) di paling atas dan lihat hasil $request ada first_name sama last_namenya ga

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban