store data in json array
convert json array to json object using json parse
use foreach fun to dispaly data from json array object
display json array data using comma
step 1: create input type file where we select multiple file
@if(!empty($sharedata->image_link))
<input type="file" name="image_upload[]" style="margin-top:10px;" id="image_upload" class="form-control" multiple>
<span class="text-danger">{{$sharedata->image_link}}</span>
<div id="selectedFiles">
<!-- Display filenames here dynamically using JavaScript -->
</div>
@else
<input type="file" name="image_upload[]" style="margin-top:10px;" id="image_upload" class="form-control" multiple>
<div id="selectedFiles">
<!-- Display filenames here dynamically using JavaScript -->
</div>
@endif
step2: send input request data using ajax route for server side processing
$('#sample_form').on('submit', function(event) {
event.preventDefault();
if ($('#action_button').val() == 'Add') {
console.log('add button click ho rha ha');
$.ajax({
url: "{{route('sharedata.update') }}",
method: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
dataType: "json",
headers: {
"Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
},
beforeSend: function() {
if (!$('#image_upload').val()) {
$('#img-error').text("Please Fill Required Field Again");
}
},
step3: store multiple image in json array using json encode
$imagePaths = [];
if (!empty($request['image_upload'])) {
foreach ($request['image_upload'] as $index => $file) {
$path = time() . '-' . $file->getClientOriginalName();
$file->move(base_path() . '/storage/app/public/images', $path);
$imagePaths[] = $path;
}
}
$sharemytask = DB::connection('payments')
->table("sharedatas")
->where('id', $taskid)
->update([
'Video_link' => $video,
'task_title' => $tasktitle,
'description' => $desc,
'image_link' => json_encode($imagePaths), // Convert array to JSON before storing in the database
]);
fullcode
public function sharedataupdate(Request $request)
{
Log::info('Inside sharedataupdate method');
Log::info($request);
$input = $request->all();
$imagePaths = [];
if (!empty($request['image_upload'])) {
foreach ($request['image_upload'] as $index => $file) {
$path = time() . '-' . $file->getClientOriginalName();
$file->move(base_path() . '/storage/app/public/images', $path);
$imagePaths[] = $path;
}
}
$video = $request['video_upload'];
$taskid = $request['task_id'];
$tasktitle = $request['task_title'];
$desc = $request['write_up'];
$sharemytask = DB::connection('payments')
->table("sharedatas")
->where('id', $taskid)
->update([
'Video_link' => $video,
'task_title' => $tasktitle,
'description' => $desc,
'image_link' => json_encode($imagePaths), // Convert array to JSON before storing in the database
]);
$data = DB::connection('payments')
->table("sharedatas")
->where('id', $taskid)
->first();
$influencer_mail = $data->influencer_email;
$data_profile = DB::table("addprofiles")
->where('user_email', $influencer_mail)
->first();
$influencer_name = $data_profile->user_name;
return response()->json([
'message' => "task disapprove successfully",
'success' => "task disapprove successfully",
'publisher' => $request['user_name'],
'influencer' => $influencer_name,
]);
}
step4: now ,i want to display multiple image file name from json array on button click
my html button
cardContent += ' <button class="btn btn-primary tasks-button" style="width: 150px;" data-orderproduct-id="' + orderIds + '" data-id="' + productIds[i] + '">Update Task</button>';
cardContent += ' <div style="margin-top: 5px;"></div>';
pass request data using ajax route
$(document).on('click', '.tasks-button', function() {
var orderId = $(this).data('id');
console.log('orderId:', orderId);
var orderProductId = $(this).data('orderproduct-id');
$.ajax({
type: 'GET',
url: "{{ route('my-task') }}",
data: {
orderid: orderId,
orderProductId: orderProductId,
},
get json data from server side
public static function mytask(Request $request)
{
Log::info('we are in payment mytasks controller function' );
$productid = $request->get('orderid');
$orderid = $request->get('orderProductId');
Log::info($productid );
Log::info($orderid);
$user_id = Auth::user()->id;
$sharedata = DB::connection('payments')->table("sharedatas")->where('order_product_id',$productid)->where('orders_id',$orderid)->first();
return response()->json([
'message' => "task approved successfully",
'success' => "task approved successfully",
'sharedata' => $sharedata,
]);
}
after getting json data we display on popup modal
var selectedFilesContainer = $('#selectedFiles');
var imageLinksArray = JSON.parse(image_link);
// Display the selected files
if (Array.isArray(imageLinksArray)) {
// Display the selected files in the same line separated by a comma
if (imageLinksArray.length > 0) {
selectedFilesContainer.text(imageLinksArray.join(', '));
}
} else {
console.error('image_link is not an array');
}
$('#product-task').modal('show');
},
other way using map
var image_link = sharedata.image_link;
var imageLinksArray = JSON.parse(image_link);
// Check if it's an array
if (Array.isArray(imageLinksArray)) {
// Display the selected files in the same line separated by a comma
if (imageLinksArray.length > 0) {
imageLinksArray.forEach(function (filename) {
console.log(filename);
// Do something with each filename
});
}
} else {
console.error('Parsed value is not an array');
}
display data using selectedFiles id
@if(!empty($sharedata->image_link))
<input type="file" name="image_upload[]" style="margin-top:10px;" id="image_upload" class="form-control" multiple>
<span class="text-danger">{{$sharedata->image_link}}</span>
<div id="selectedFiles">
<!-- Display filenames here dynamically using JavaScript -->
</div>
@else
<input type="file" name="image_upload[]" style="margin-top:10px;" id="image_upload" class="form-control" multiple>
<div id="selectedFiles">
<!-- Display filenames here dynamically using JavaScript -->
</div>
@endif
Top comments (0)