Hi every one, I am using laravel 8, and i want to update data using model, now i am facing little problem. The Problem is only details are update but file or image did not updated, i give every thing in bellow,
Blade Code: THis is my datatable
<table width="100%" id="example">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Image</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@php
$i=0;
@endphp
@foreach ($banner as $item )
<tr id="banner-{{ $item->id }}">
<td>{{ $i }}</td>
<td>{{ $item->title }}</td>
<td><img src="{{ asset('/assets/image/banner/'.$item->image) }}" alt="" style="width: 100px; height:100px"></td>
<td><input type="checkbox" name="status" id="status" data-toggle="toggle" data-on="Active" data-off="Deactive" data-onstyle="success" data-offstyle="danger" data-id="{{ $item->id }}" {{ $item->status == 'Active' ? 'checked' : '' }}></td>
<td>
<a href="javascript:void(0);" onclick="editbanner({{ $item->id }})"><i ></i></a>
<a href="javascript:void(0);" data-id="{{ $item->id }}" role="button" ><i ></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
Update Model here is data update model, that i create for update data.
<div id="BannerEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div role="document">
<div >
<div >
<div >
<h3 id="exampleModalLabel">Insert Position & Salary</h3>
</div>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<ul id="BannerForm_errorlist"></ul>
<form id="bannereditform" method="post">
@csrf
<input type="hidden" name="id" id="id">
<div >
<label>Title<small >*</small></label>
<input type="text" id="title1" name="title1" />
</div>
<div >
<label>Banner Image<small >*</small></label>
<input type="file" id="image1" name="image1" />
</div>
<div >
<button type="button" data-bs-dismiss="modal">Close</button>
<input type="submit" name="submit" id="submit" value="Update" />
</div>
</form>
</div>
</div>
</div>
Ajax Part This is Ajax code for data fetching and data uploading
function editbanner(id) {
$.get("/banner/edit/" id, function(banner) {
$('#id').val(banner.id);
$('#title1').val(banner.title);
$('#BannerEditModal').modal("toggle");
});
}
$('#bannereditform').submit(function(e) {
e.preventDefault();
let id = $('#id').val();
var title1 = $('#title1').val();
var image1 = $('#image1').val();
let _token = $('input[name=_token]').val();
console.log(image1);
$.ajax({
type: "PUT"
, url: "/banner/update"
, data: {
id: id
, title1: title1
, image1: image1
, _token: _token
, }
, dataType: "json"
, success: function(response) {
// console.log(response);
$('#banner' response.id 'td:nth-child(1)').text(response.title1);
$('#banner' response.id 'td:nth-child(2)').val(response.image1);
$('#BannerEditModal').modal("toggle");
// location.reload();
$('#bannereditform')[0].reset();
}
});
});
Controller
public function update(Request $request)
{
$banner = Banner::find($request->id);
$banner->title = $request->input('title1');
if($request->hasFile('image1')){
$destination = public_path().'/assets/image/banner/'.$banner->image;
if(File::exists($destination)){
File::delete($destination);
}
$image = $request->file('image1');
$image_name = time().'.'.$image->getClientOriginalExtension();
$image->move(public_path().'/assets/image/banner/',$image_name);
$banner->image = $image_name;
}
$banner->save();
return response()->json($banner);
}
Route Here is my data fatching and data updating route
Route::get('/banner/edit/{id}', "App\Http\Controllers\BannerController@edit")->name('banner.edit');
Route::put('/banner/update', "App\Http\Controllers\BannerController@update")->name('banner.update');
CodePudding user response：
You are missing enctype in your modal form: The enctype attribute specifies how the form-data should be encoded when submitting it to the server.
Note: The enctype attribute can be used only if method="post".
<div role="document">
<div >
<div >
<div >
<h3 id="exampleModalLabel">Insert Position & Salary</h3>
</div>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<ul id="BannerForm_errorlist"></ul>
<form id="bannereditform" method="post" enctype="multipart/form-data">
@csrf
<input type="hidden" name="id" id="id">
<div >
<label>Title<small >*</small></label>
<input type="text" id="title1" name="title1" />
</div>
<div >
<label>Banner Image<small >*</small></label>
<input type="file" id="image1" name="image1" />
</div>
<div >
<button type="button" data-bs-dismiss="modal">Close</button>
<input type="submit" name="submit" id="submit" value="Update" />
</div>
</form>
</div>
</div>
Ajax : to send form files and data to Back-end we are using Form Data objects:
$('#bannereditform').submit(function(e) {
e.preventDefault();
let formData = new FormData($('#bannereditform')[0]);
$.ajax({
type: "PUT"
, url: "/banner/update"
, data:formData,
, dataType: "json"
, success: function(response) {
// console.log(response);
$('#banner' response.id 'td:nth-child(1)').text(response.title1);
$('#banner' response.id 'td:nth-child(2)').val(response.image1);
$('#BannerEditModal').modal("toggle");
// location.reload();
$('#bannereditform')[0].reset();
}
});})
CodePudding user response：
you need to change the way you getting value from #image from
var image1 = $('#image1').val();
to
var image1 = $('#image1').prop('files')[0]