Larvel Dropzone js delete image via ajax won't work gives 404 error

69 views Asked by At

I have put my .htacess and index.php of laravel which remain inside public folder put into main directory to avoid public/ from url. When trying to remove image real time via dropzone gets error 404, However if works fine on online server, but when i try it won't work locally & but if i put .htacess and index.php within public folder it works on local server too.

Would appreciate if any one can rescue from this situation.

// controller

public function deleteImage(Request $request, $imageName)
{
    try {
        // Construct the full path to the image in storage
        $imagePath = public_path('/uploads/images/gallery/') . $name;

        // Check if the image file exists in the storage
        if (File::exists($imagePath)) {
            // Delete the image file from storage
            File::delete($imagePath);

            // Delete the image record from the database
            $image = Gallery::where('name', $name)->first();
            if ($image) {
                $image->delete();
                return response()->json(['message' => 'Image deleted successfully']);
            } else {
                return response()->json(['message' => 'Image record not found in the database'], 404);
            }
        } else {
            return response()->json(['message' => 'Image file not found'], 404);
        }
    } catch (\Exception $e) {
        return response()->json(['message' => 'Error deleting image'], 500);
    }
}

// dropzone js

<script>
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#dropzone", {
        url: "{{ route('gallery.upload') }}",
        paramName: "gallery",
        maxFilesize: 10, // Max file size in MB
        // maxFiles: 5,
        acceptedFiles: ".jpg, .jpeg, .png, .gif, .webp", // Allowed file types
        addRemoveLinks: true,
        dictRemoveFile: "Remove",
        dictDefaultMessage: "Drop files here or click to upload",
        headers: {
            'X-CSRF-Token': "{{ csrf_token() }}"
        },
        init: function() {
            var dropzone = this;

            this.on("success", function(file, response) {
                // Handle the success response (if needed)
                console.log(response.name);

                // Assign the unique image name to the file object
                file.serverFileName = response.name;

                // Create a hidden input field with the image name
                var imageNameInput = document.createElement('input');
                imageNameInput.type = 'hidden';
                imageNameInput.name = 'gallery[]';
                imageNameInput.value = response.name;

                // Append the hidden input field to the form
                dropzone.element.appendChild(imageNameInput);
            });


            //delete image
            this.on("removedfile", function(file) {
                // Handle the removal of a file (image) from Dropzone
                imageName = file.serverFileName; // Use the serverFileName assigned earlier
                console.log(imageName);

                // Remove the corresponding hidden input field from the form
                var inputToRemove = document.querySelector('input[name="gallery[]"][value="' +
                    imageName + '"]');
                if (inputToRemove) {
                    inputToRemove.parentNode.removeChild(inputToRemove);
                }

                // Use the deleteRoute and csrfToken variables obtained from the Blade file
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('gallery.delete', ['imageName' => ':imageName']) }}"
                        .replace(':imageName', imageName),
                    //url: "/admin/gallery/delete/" + imageName, // Use the correct image name
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        console.log(data.message); // Log the success message
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText); // Log any errors
                    }
                });
            });
        }
    });
</script>

//route

Route::delete('/gallery/delete/{imageName}', [PropertyController::class,'deleteImage'])->name('gallery.delete');
0

There are 0 answers