Ajax request for delete image doesnt work in laravel

Question

I want to delete the image in the preview box, as well as delete it in the database using ajax. Deleting the image in the preview box was successful, but deleting it from the database didn't work.

here my ajax:

$(document).ready(function() {
        document.getElementById('pro-image').addEventListener('change', readImage, false);
        $(".preview-images-zone").sortable();
        $(document).on('click', '.image-cancel', function() {
            let no = $(this).data('no');
            let idData = $(this).data('id');
            $(".preview-image.preview-show-" + no).remove();
            $.ajax({
                type: 'POST',
                url: '{{url("unit/API/simpan")}}',
                data: {
                    'id': idData
                },
                success: function(data) {
                    alert('success');
                }
            });
        });

    });

My Html:

<!-- Percobaan Preview -->
                        <fieldset class="form-group">
                            <div class="offset-md-2 col-md-6">
                                <a href="javascript:void(0)" onclick="$('#pro-image').click()" class="btn btn-primary">Upload Gambar</a>
                                <input type="file" id="pro-image" name="gambarku[]" style="display: none;" class="form-control" multiple>

                            </div>
                        </fieldset>
                        <div class="preview-images-zone offset-md-2 col-md-8">
                            <!-- Gambar Utama  -->
                            <div class="preview-image preview-show-1">
                                <div class="image-cancel" data-no="1">x</div>
                                <div class="image-zone"><img id="pro-img-1" src="{{asset('storage/rumah/'.$rumahku->gambar_rumah)}}"></div>

                            </div>
                            <!-- Gambar Tambahan -->
                            <?php $counter = 2 ?>
                            @foreach($rumahku->gambar as $rows)
                            <div class="preview-image preview-show-{{$counter}}">
                                <div class="image-cancel" data-no="{{$counter}}" data-id="{{$rows->id_gambar}}">x</div>
                                <div class="image-zone"><img id="pro-img-{{$counter}}" src="{{asset('storage/rumah/'.$rows->gambar_unit)}}"></div>
                            </div>
                            <?php $counter++ ?>
                            @endforeach
                        </div>

                        <!-- /preview -->

my route

Route::post('unit/API/simpan/{id}', 'partner\UnitController@simpanGambar');

my controller

public function simpanGambar($id)
{
    $gambar = Gambar::find($id);
    $gambar->delete();
}

your url: '{{url("unit/API/simpan")}} here id is missing — Kamlesh Paul
– Kamlesh Paul, Commented Sep 22, 2020 at 9:07
Helo Kamlesh, thx for replying my message. the id is on the data:{'id': idData} — alexistdev
– alexistdev, Commented Sep 22, 2020 at 9:12
You defined your route with an ID required in the url. The passed data is something different. As kamlesh said, try to add the Id to the url. Also, would be good if you attach the response you are getting. — chuysbz
– chuysbz, Commented Sep 22, 2020 at 9:21
thanks Chuy, i have variable id from let id = $(this).data('id') , cant you tell me how to pass it in ajax — alexistdev
– alexistdev, Commented Sep 22, 2020 at 9:22

Kamlesh Paul · Accepted Answer · 2020-09-22 09:23:48Z

1

you can try this

Route::post('unit/API/simpan', 'partner\UnitController@simpanGambar');

and

public function simpanGambar(Request $request)
{
    $gambar = Gambar::find($request->id);
    $gambar->delete();
}

or in ajax

 $.ajax({
     type: 'POST',
     url: '{{url("unit/API/simpan")}}' +'/'+ id,  <---------- pass id here

edited Sep 22, 2020 at 9:23

answered Sep 22, 2020 at 9:13

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

alexistdev Over a year ago

i have variable id from let id = $(this).data('id') , cant you tell me how to pass it in ajax

alexistdev Over a year ago

thanks Kamlesh, this is work when i change into get Method on the route and ajax. But with the POST method this is doesnt work.

chuysbz Over a year ago

Please add debug info (response) on your question.

alexistdev Over a year ago

@kamlesh Paul, i have test it using postman, and this result is 404 .i used this url:127.0.0.1:8000/unit/API/simpan/27

alexistdev Over a year ago

Kamlesh i tried your answer and put this url into my browser 127.0.0.1:8000/unit/API/simpan and the result is error message "The GET method is not supported for this route". Supported methods: POST. It should be redirect to 404 just like i use the url 127.0.0.1:8000/unit/store (the default controller store).

|

Collectives™ on Stack Overflow

Ajax request for delete image doesnt work in laravel

1 Answer 1

or in ajax

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

or in ajax

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related