Laravel | Delete function - how to delete photo from calendar's event

Question

How can I remove photo from calendar's event in edit calendar's event view? In list of events I did delete method and it works. Now when I try to do the same in edit.blade.php it gives error:

Call to a member function photos() on null

I have two tables in relationship one calendar to many photos, file upload works, but I stucked on edit part.

Look at my controller function:

public function deletePhoto(CalendarRepository $calRepo, $id)
    {
        $calendars = $calRepo->find($id);
        $calendars->photos($id)->delete();
        return redirect()->action('CalendarController@edit');
    }

and here is fragment of edit.blade.php:

<div class="form-group">
<label for="photo">Photo:</label>
  <div class="row">
      @foreach(($calendar->photos) as $photo)
           <div class="col-md-3">
                <div class="admin-thumbnail">
                      <img class="img-responsive" src="/storage/{{ $photo->filename }}" style="width:100px; height:auto;"/>
                </div>
                <a href="{{ URL::to('calendar/deletePhoto/' . $photo->id ) }}" onClick="return confirm('Are you sure?')"><i class="fas fa-times"></i>Remove</a>
          </div>
      @endforeach
      </div>
</div>

I need to remove photo from Photo table and redirect to edit.blade.php (about the specific event id of the calendar)

Thanks for any help.

---

EDIT:

<div class="card-body">
    <form action="{{ action ('CalendarController@editStore')}}" method="POST" enctype="multipart/form-data">
         <input type="hidden" name="_token" value="{{csrf_token() }}"/>
         <input type="hidden" name="id" value="{{ $calendar->id }}"/>
         <input type="hidden" name="_token" value="{{csrf_token() }}"/>
         <div class="form-group">
             <label for="photo">Photo:</label>
                   <div class="row">
                        @foreach(($calendar->photos) as $photo)
                             <div class="col-md-3">
                                  <div class="admin-thumbnail">
                                       <img class="img-responsive" src="/storage/{{ $photo->filename }}"/>
                                  </div>
                                  <form method="POST" action="{{ route('photo.delete', ['calendar' => $calendar, 'photo' => $photo]) }}">
                                        @csrf
                                        @method("DELETE")
                                        <a onClick="return confirm('Are you sure?')"><i class="fas fa-times"></i>Remove</a>
                                  </form>
                            </div>
                        @endforeach
                   </div>
                </div>
            <div class="form-group">
                 <label for="header">Header</label> 
                 <input type="text" class="form-control" name="header" value="{{ $calendar->header }}"/>
            </div>
            <div class="form-group">
                 <label for="description">Description</label>
                 <input type="text" class="form-control" name="description" value="{{ $calendar->description }}"/>
            </div>
            <div class="form-group">
                <label for="date">Date</label>
                <input type="date" class="form-control" name="date" value="{{ $calendar->date }}"/>
            </div>
            <input type="submit" value="Save" class="btn btn-primary"/>
      </form>
</div>

Answer 1

You use the same $id to find the photo and the calendar instance. GET request is not recommended for deleting a resource, so a better approach would be in your routes you can have something like this:

Route::delete('photo/{photo}', 'PhotosController@delete')->name('photo.delete');

Then in your view, you should surround the button with a Form, for example:

<form method="POST" action="{{ route('photo.delete', $photo) }}">
@csrf
@method("DELETE")
<a onClick="return confirm('Are you sure?')"><i class="fas fa-times"></i>Remove</a>
</form>

Then your confirm function in JS should submit the form if the user accepts to delete the photo. And also remember to return false as default in the confirm function so it does not submits the form by default.

Your controller will then be:

public function delete(Photo $photo)
{   
    $photo->delete();
    return redirect()->back();
}

--- EDIT

Route::delete('calendar/{calendar}/photo/{photo}', 'CalendarController@deletePhoto')->name('photo.delete');

and the action in the form can be:

{{ route('photo.delete', ['calendar' => $calendar, 'photo' => $photo]) }}

The method in the controller:

public function deletePhoto(Calendar $calendar, Photo $photo)
{   
    $calendar->photos()->where('id', $photo->id)->delete();
    return redirect()->action('CalendarController@edit');
}