[FIXED] How to input file image through AJAX jquery?

Issue

so i want to submit or upload file from html through AJAX and send it to my Laravel cotnroller. when i submit to controller and do dd($request) , it's showing all input request except from file request.

here's my code

  <form method="post"  enctype="multipart/form-data" id="form-tambah-edit" name="form-tambah-edit" class="form-horizontal">
                            @csrf
                                <input type="hidden" name="id" id="id">
                                {{-- <input type="hidden" name="post_banner" id="post_banner"> --}}

                                <div class="form-group">
                                    <label for="name" class="col-sm-12 control-label">Banner Kegiatan</label>
                                    <div class="col-sm-12">
                                        <input type="file" class="form-control" id="banner" name="banner">
                                    </div>
                                </div>
</form>

and here's my jquery AJAX code.

 if ($("#form-tambah-edit").length > 0) {
        var fileUpload = $("#banner").get(0);
        var files = fileUpload.files;
        var data = new FormData();

        for (var i = 0; i < files.length; i++) {
            data.append("File", files[i]);
        }

        $("#form-tambah-edit").validate({
            submitHandler: function (form) {
                var actionType = $('#tombol-simpan').val();
                $('#tombol-simpan').html('Sending..');

                $.ajax({
                    data: $('#form-tambah-edit')
                        .serialize(),
                    url: "{{ route('kegiatan.store') }}", 
                    type: "POST", 
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (data) {  
                        $('#form-tambah-edit').trigger("reset"); 
                        $('#tambah-edit-modal').modal('hide'); 
                        $('#tombol-simpan').html('Simpan');
                        var oTable = $('#kegiatan').dataTable();
                        oTable.fnDraw(false);
                        iziToast.success({ 
                            title: 'Data Berhasil Disimpan',
                            message: '{{ Session('
                            success ')}}',
                            position: 'bottomRight'
                        });
                    },
                    error: function (data) { 
                        console.log('Error:', data);
                        $('#tombol-simpan').html('Simpan');
                    }
                });
            }
        })
    }

Solution

You did not set the request method in your ajax code so it will default to a GET request, which is wrong so you have to explicitly set it to POST

You cannot use .serialize() for file uploads, you have to use a FormData object.

$.ajax({
    type: 'POST',
    data: new FormData($('#form-tambah-edit')[0]),
    url: "{{ route('kegiatan.store') }}", 
    type: "POST", 
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (data) {  
        $('#form-tambah-edit').trigger("reset"); 
        $('#tambah-edit-modal').modal('hide'); 
        $('#tombol-simpan').html('Simpan');
        var oTable = $('#kegiatan').dataTable();
        oTable.fnDraw(false);
        iziToast.success({ 
            title: 'Data Berhasil Disimpan',
            message: '{{ Session('
            success ')}}',
            position: 'bottomRight'
        });
    },
    error: function (data) { 
        console.log('Error:', data);
        $('#tombol-simpan').html('Simpan');
    }
});

Answered By - Musa

Answer Checked By - Cary Denson (PHPFixing Admin)