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" >
@csrf
<input type="hidden" name="id" id="id">
{{-- <input type="hidden" name="post_banner" id="post_banner"> --}}
<div >
<label for="name" >Banner Kegiatan</label>
<div >
<input type="file" 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');
}
});
}
})
}
CodePudding user response:
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');
}
});