Updating Image in Modal Yajra Datatable - php

Question

I'm trying to achieve updating Image I tried finding for the answer but it seems that they don't work on mine maybe because I am using Yajra DataTables, I already inserted or added the image seems to be working fine but whenever I click the button it doesn't popup the modal Thank you in Advance.
This is my Controller:
public function edit($id)
{
if (request()->ajax()) {
$shippings = Shipping_data::findOrFail($id);
return response()->json(['result' => $shippings]);
}
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(Request $request, Shipping_data $shippings_data)
{
$rules = array(
'name' ,
'mobile',
'items',
'shippingAddress',
'amount',
'facebookLink',
'facebookName',
"modePayment",
"shipVia"=> 'required',
"trackingNumber"=> 'required',
"shippingReceipt"=> 'required',
"shippingCharged"=> 'required',
"shippingWeight"=> 'required'
);
$error = Validator::make($request->all(), $rules);
if ($error->fails()) {
return response()->json(['errors' => $error->errors()->all()]);
}
// Handle File Upload
if ($request->hasFile('shippingReceipt')) {
// Get filename with the extension
$filenameWithExt = $request->file('shippingReceipt')->getClientOriginalName();
// Get just filename
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
// Get just ext
$extension = $request->file('shippingReceipt')->getClientOriginalExtension();
// Filename to store
$fileNameToStore= $filename.'_'.time().'.'.$extension;
// Upload Image
$path = $request->file('shippingReceipt')->storeAs('public/shippingReceipts', $fileNameToStore);
}else {
$fileNameToStore = '';
}
$form_data = array(
'name' => $request->name,
'mobile'=> $request->mobile,
'items'=> $request->items,
'shippingAddress'=> $request->shippingAddress,
'amount'=> $request->amount,
'facebookLink'=> $request->facebookLink,
'facebookName'=> $request->facebookName,
"modePayment"=> $request->modePayment,
"shipVia"=> $request->shipVia,
"trackingNumber"=> $request->trackingNumber,
"shippingReceipt"=> $request->fileNameToStore,
"shippingWeight"=> $request->shippingWeight,
"shippingCharged"=> $request->shippingCharged,
);
Shipping_data::whereId($request->hidden_id)->update($form_data);
return response()->json(['success' => 'Shipping Data is successfully updated']);
}
This is my blade.php:
#extends('layouts.navbar')
#section('content')
<br />
<br />
<br />
Add Order Data
<br>
<br>
<!-- Table -->
<div style="margin: 10px 15px;">
<table id="shipping_table" class="table table-bordered table-striped ">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Mobile Number</th>
<th scope="col">Item Orders</th>
<th scope="col">Shipping Address</th>
<th scope="col">Amount</th>
<th scope="col">Facebook Link</th>
<th scope="col">Facebook Name</th>
<th scope="col">Mode of Payment</th>
<th scope="col">Ship Via</th>
<th scope="col">Tracking Number</th>
<th scope="col">Shipping Receipt</th>
<th scope="col">Shipping Charged</th>
<th scope="col">Shipping Weight</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
<br />
<br />
<!-- End Table -->
</body>
</html>
<!-- Modal -->
<div id="formModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Add Shipping Data</h4>
</div>
<div class="modal-body">
<span id="form_result"></span>
<form method="post" id="shipping_form" class="form-horizontal">
#csrf
#if(Auth::check() && Auth::user()->role == "admin")
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" placeholder="Please Enter Client Name"
id="name">
</select>
</div>
<div class="form-group">
<label>Mobile</label>
<input type="text" class="form-control" name="mobile" placeholder="Please Enter Mobile Number"
id="mobile">
</div>
<div class="form-group">
<label>Items Order</label>
<input type="text" class="form-control" name="items" placeholder="Please Enter Items Order"
id="items">
</div>
<div class="form-group">
<label>Shipping Address</label>
<input type="text" class="form-control" name="shippingAddress" id="shippingAddress"
placeholder="Please Enter Shipping Address">
</div>
<div class="form-group">
<label>Amount</label>
<input type="text" class="form-control" name="amount" placeholder="Please Enter Amount"
id="amount">
</div>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="facebookLink" id="facebookLink"
placeholder="Please Enter Facebook Link">
</div>
<div class="form-group">
<label>Facebook Name</label>
<input type="text" class="form-control" name="facebookName" id="facebookName"
placeholder="Please Enter Facebook Name">
</div>
<div class="form-group">
<label>Mode of Payment</label>
<input type="text" class="form-control" name="modePayment" id="modePayment"
placeholder="Please Enter Mode of Payment">
</div>
#endif
#if(Auth::check() && Auth::user()->role == "employee")
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" placeholder="Please Enter Name" id="name"
READONLY>
</div>
<div class="form-group">
<label>Mobile</label>
<input type="text" class="form-control" name="mobile" placeholder="Please Enter Mobile Number"
id="mobile" READONLY>
</div>
<div class="form-group">
<label>Items Order</label>
<input type="text" class="form-control" name="items" placeholder="Please Enter Items Order"
id="items" READONLY>
</div>
<div class="form-group">
<label>Shipping Address</label>
<input type="text" class="form-control" name="shippingAddress" id="shippingAddress" READONLY
placeholder="Please Enter Shipping Address">
</div>
<div class="form-group">
<label>Amount</label>
<input type="text" class="form-control" name="amount" placeholder="Please Enter Amount"
id="amount" READONLY>
</div>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="facebookLink" id="facebookLink" READONLY
placeholder="Please Enter Facebook Link">
</div>
<div class="form-group">
<label>Facebook Name</label>
<input type="text" class="form-control" name="facebookName" id="facebookName" READONLY
placeholder="Please Enter Facebook Name">
</div>
<div class="form-group">
<label>Mode of Payment</label>
<input type="text" class="form-control" name="modePayment" id="modePayment" READONLY
placeholder="Please Enter Mode of Payment">
</div>
#endif
<div class="form-group">
<label>Shipping Via</label>
<input type="text" class="form-control" name="shipVia" placeholder="Please Enter Shipping Via"
id="shipVia">
</div>
<div class="form-group">
<label>Tracking Number</label>
<input type="text" class="form-control" name="trackingNumber" id="trackingNumber"
placeholder="Please Enter Tracking Number">
</div>
<div class="form-group">
<label>Shipping Receipt</label>
<br>
<input type="file" class="form-control file-form" name="shippingReceipt" id="shippingReceipt">
</div>
<div class="form-group">
<label>Shipping Charged</label>
<input type="text" class="form-control" name="shippingCharged" id="shippingCharged"
placeholder="Please Enter Shipping Charged">
</div>
<div class="form-group">
<label>Shipping Weight</label>
<input type="text" class="form-control" name="shippingWeight" id="shippingWeight"
placeholder="Please Enter Shipping Weight">
</div>
<br />
<div class="form-group" align="center">
<input type="hidden" name="action" id="action" value="Add" />
<input type="hidden" name="hidden_id" id="hidden_id" />
<input type="submit" name="action_button" id="action_button" class="btn btn-success"
value="Add" />
</div>
</form>
</div>
</div>
</div>
</div>
<div id="confirmModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Confirmation</h2>
</div>
<div class="modal-body">
<h4 align="center" style="margin:0;">Are you sure you want to remove this data?</h4>
</div>
<div class="modal-footer">
<button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
<script>
$(document).ready(function () {
$('#shipping_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('shipping.index') }}",
},
columns: [
{
data: 'name',
name: 'name'
},
{
data: 'mobile',
name: 'mobile'
},
{
data: 'items',
name: 'items'
},
{
data: 'shippingAddress',
name: 'shippingAddress'
},
{
data: 'amount',
name: 'amount'
},
{
data: 'facebookLink',
name: 'facebookLink'
},
{
data: 'facebookName',
name: 'facebookName'
},
{
data: 'modePayment',
name: 'modePayment'
},
{
data: 'shipVia',
name: 'shipVia'
},
{
data: 'trackingNumber',
name: 'trackingNumber'
},
{
data: 'shippingReceipt',
name: 'shippingReceipt',
"render": function (data, type, full, meta) {
return "<img src=\"storage/shippingReceipts/" + data + "\" height=\"50\"/>";
},
},
{
data: 'shippingCharged',
name: 'shippingCharged'
},
{
data: 'shippingWeight',
name: 'shippingWeight'
},
{
data: 'action',
name: 'action',
orderable: false
}
]
});
$('#create_record').click(function () {
$('.modal-title').text('Add Client Data');
$('#action_button').val('Add Client Data');
$('#action').val('Add');
$('#form_result').html('');
$('#formModal').modal('show');
});
$('#shipping_form').on('submit', function (event) {
event.preventDefault();
var action_url = '';
if ($('#action').val() == 'Add') {
action_url = "{{ route('shipping.store') }}";
}
if ($('#action').val() == 'Edit') {
action_url = "{{ route('shipping.update') }}";
}
$.ajax({
url: action_url,
method: "POST",
data: $(this).serialize(),
dataType: "json",
success: function (data) {
var html = '';
if (data.errors) {
html = '<div class="alert alert-danger">';
for (var count = 0; count < data.errors.length; count++) {
html += '<p>' + data.errors[count] + '</p>';
}
html += '</div>';
}
if (data.success) {
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#shipping_form')[0].reset();
$('#shipping_table').DataTable().ajax.reload();
}
$('#form_result').html(html);
}
});
});
$(document).on('click', '.edit', function () {
var id = $(this).attr('id');
$('#form_result').html('');
$.ajax({
url: "/shipping/" + id + "/edit",
dataType: "json",
success: function (data) {
$('#name').val(data.result.name);
$('#mobile').val(data.result.mobile);
$('#items').val(data.result.items);
$('#shippingAddress').val(data.result.shippingAddress);
$('#amount').val(data.result.amount);
$('#facebookLink').val(data.result.facebookLink);
$('#facebookName').val(data.result.facebookName);
$('#modePayment').val(data.result.modePayment);
$('#shipVia').val(data.result.shipVia);
$('#trackingNumber').val(data.result.trackingNumber);
$('#shippingReceipt').val(data.result.shippingReceipt);
$('#shippingCharged').val(data.result.shippingCharged);
$('#shippingWeight').val(data.result.shippingWeight);
$('#hidden_id').val(id);
$('.modal-title').text('Edit Record');
$('#action_button').val('Save');
$('#action').val('Edit');
$('#formModal').modal('show');
}
})
});
var shipping_id;
$(document).on('click', '.delete', function () {
shipping_id = $(this).attr('id');
$('#confirmModal').modal('show');
});
$('#ok_button').click(function () {
$.ajax({
url: "shipping/destroy/" + shipping_id,
beforeSend: function () {
$('#ok_button').text('Deleting...');
},
success: function (data) {
setTimeout(function () {
$('#confirmModal').modal('hide');
$('#shipping_table').DataTable().ajax.reload();
}, 2000);
}
})
});
});
</script>
#endsection

Answer 1

You can't view an image on input field, but you can do it with img tag :
<img class="img-circle" id="view_photo">
Change this line :
$('#shippingReceipt').val(data.result.shippingReceipt);
To,
$("#view_photo").attr("src", data.result.shippingReceipt);