Whenever I clicked on the Edit icon in the action column of my data tables, the saved data did not display as expected. I noticed that this issue was only occurring for file input types, while it worked properly for text input types.
In the Blade file
Add Form
<form class="form" id="add" enctype="multipart/form-data">
Name<input type="text" class="form-control" name="name" required>
file<input type="file" class="form-control" name="path" required>
</form>
Update form
<form class="form" id="Update" enctype="multipart/form-data">
Name<input type="text" class="form-control" name="name" id= "editname" required>
file<input type="file" class="form-control" name="path" id= "editpath" required>
</form>
To allow users to edit data in my data tables by clicking on the Edit icon under the Action Column
<div class="responsive">
<table id="myFiles">
<thead>
<tr>
<th>File</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($files as $f)
<tr>
<td><a href="{{ asset($f->path) }}">{{ $f->name }}</a></td>
<td>
<div class="topButtons">
<form class="formEditDataF">
<input type="hidden" name="upload_id" value="{{ $f->id }}">
<button class="btn btn-info btn-sm" type="submit"><i class="bx bx-edit-alt font-medium-1"></i></button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div> `
For the Script file related to Edit
$('#myFiles').on('submit', '.formEditDataF', function(event){
event.preventDefault();
var formData = $(this).serializeArray();
$.ajax({
type: 'GET',
url: "{{ route('getfile') }}",
processData:false,
data: formData
}).done(function(response) {
$('#edit_file_id').val(response.id);
$('#editname').val(response.name);
$('#editpath').val(response.path);
$('#myModal2').modal('show');
}).fail(function(data) {
swal({
type: "error",
title: "Oops. An Error Occured",
text: "Please try again"
});
});
});
Script for Update
In my Controller
public function getFile(Request $request) {
$data = DB::table('file.file')->where([['id', $request->file_id]])->first();
return response()->json($data);
}