Handle a list of files over laravel CRUD

Viewed 40

I'm working on a form where you have to enter all information you need and at the end, on save all information will be saved at the same times. The form have a list of images where you can add, change and delete pictures.

The way it was made is that all inputs refer to the name carousels[]. Adding the file is alright, the problem is that this way I have no way to identify in backend which file I have to delete or change.

I'm wondering if any Laravel master know a better way to handle a list of files over a form the way a need it to work. So I would be able to add new images, replace an old image by a new one and/or delete a specific image.

There are the pieces of code I'm working with.

Frontend:

@php
$carrousel = $Ids = [];
foreach ($offerImages as $index => $image) {
   $carrousel[] = $image['image'];
   $ids[] = $index;
}
@endphp
@for($i = 0; $i < 4; $i++)
<div class="col-sm-4 error-block">
    <div class="{{ (!empty($carrousel[$i])) ? 'fileinput fileinput-exists':'fileinput fileinput-new' }}" data-provides="fileinput">
        <div class="fileinput-preview thumbnail" id="banner{{$i}}" data-trigger="fileinput">
            <img src="{{ !empty($carrousel[$i]) ? asset($carrousel[$i]) : (url('/') . "/images/default-thumbnail.png") }}"></div>
        <div>
            <span class="btn btn-secondary btn-sm btn-file">
                <span class="fileinput-new ">Select image</span>
                <span class="fileinput-exists">Change</span>
                <input type="file" name="carrousels[]" id="carrousel{{$i}}">
            </span>
            <a href="#" class="btn btn-sm btn-danger" data-image_id="{{ (!empty($carrousel[$i])) ? $ids[$i] : '' }}" data-dismiss="fileinput">Remove</a>
        </div>
    </div>
</div>
@endfor

Backend

public function update(UpdateRequest $request)
    {
        try {
            $id = $request->id;
            $carrouselFolder = config('constants.DEFAULT.UPLOAD_FOLDERS.CARROUSEL');

            $carrousels = [];
            Log::debug($request->carrousels);
            if ($request->carrousels) {
                foreach ($request->carrousels as $image) {
                    if (!empty($image)) {
                        //upload image
                        $imageName = generateRandomString(30) . '.' . $image->getClientOriginalExtension();
                        if ($image->move(public_path($carrouselFolder), $imageName)) {
                            $image = $carrouselFolder . $imageName;
                        }
                        $carrousels[] = $image;
                    }
                }
            }

            return redirect()->to(route('...'))
                ->with('toastSuccess', '...');
        } catch (\Exception $e) {
            return redirect()->back()->with('toastError', $e->getMessage());
        }
    }
1 Answers

send another parameter with old carousel, retrive it in controller then if both not empty, delete the old image . you can try this View code

@php
$carrousel = $Ids = [];
foreach ($offerImages as $index => $image) {
$carrousel[] = $image['image'];
$ids[] = $index;
}
@endphp
@for($i = 0; $i < 4; $i++)
<div class="col-sm-4 error-block">
  <div class="{{ (!empty($carrousel[$i])) ? 'fileinput fileinput-exists':'fileinput fileinput-new' }}" data-provides="fileinput">
    <div class="fileinput-preview thumbnail" id="banner{{$i}}" data-trigger="fileinput">
        <img src="{{ !empty($carrousel[$i]) ? asset($carrousel[$i]) : (url('/') . "/images/default-thumbnail.png") }}"></div>
    <div>
        <span class="btn btn-secondary btn-sm btn-file">
            <span class="fileinput-new ">Select image</span>
            <span class="fileinput-exists">Change</span>
<input type="text" name="oldcarrousels[{{$i}}]" value="{{ !empty($carrousel[$i]) ?$carrousel[$i] :'' }}">
            <input type="file" name="carrousels[{{$i}}]" id="carrousel{{$i}}">
        </span>
        <a href="#" class="btn btn-sm btn-danger" data-image_id="{{ (!empty($carrousel[$i])) ? $ids[$i] : '' }}" data-dismiss="fileinput">Remove</a>
    </div>
</div>
</div>
@endfor

Controller code

   foreach ($request->carrousels as $in=>$image) {
                if (!empty($image)) {
                   if (!empty($request->oldcarrousels[$in]) || $request->oldcarrousels[$in]!='') {
                      //image deleting code here
                    }
                    //upload image
                    $imageName = generateRandomString(30) . '.' . $image->getClientOriginalExtension();
                    if ($image->move(public_path($carrouselFolder), $imageName)) {
                        $image = $carrouselFolder . $imageName;
                    }
                    $carrousels[] = $image;
                }
            }
Related