Image upload page gives "302 Found" status code and redirect back to the same Image upload page

I am using Laravel 8 as a framework and my Image Upload page keeps me redirect back to the same page with status code 302 Found.

I have cross-checked all the routes and code for any possible error but failed to find the problem. I have also tried solutions of SO and Goole but unable to fix the problem.

Route file

Route::prefix('register/user')->name('register.user.')->middleware('auth')->group(function () {

    Route::get('details', [CompleteRegistrationController::class, 'edit'])->name('details');
    Route::put('details', [CompleteRegistrationController::class, 'update'])->name('details.update');

    Route::get('image', [ProfileImageController::class, 'create'])->name('image');
    Route::post('image', [ProfileImageController::class, 'store'])->name('image.store');

});

I have tried to change the route to the below code but received the same 302 status code again instead of "OK".

Route::post('image', function () { return 'Ok'; })->name('image.store');

There is nothing in my controller just die-dump the request.

public function store(Request $request)
{
    dd($request);
}

View file

View file was quite large so I have removed the unnecessary parts. (I have used Cropper.js for cropping and jQuery slider for zooming.)

@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <form id="registerUserImageForm" class="form-horizontal clearfix" method="POST" action="{!! route('register.user.image.store') !!}" role="form" enctype="multipart/form-data" novalidate>
     @csrf

                    

        <div class="img-container mx-auto" style="display: none;">
            <img src="" alt="Picture">
        </div>

        <div id="zoom-slider" class=""></div>
                            
        <div class="uploadButtonWrapper">
            <label class="btn col-lg-6 mx-auto d-block mt-2 mb-3 rounded-pill c-btn-theme" for="userImage" title="Upload image file">
                <input type="hidden" name="cropped_value" id="cropped_value" value="">
                <input id="userImage" type="file" name="userImage" accept="image/*">
                <span class="uploadButton">Choose Image</span>
            </label>
        </div>

        <button id="registerUserImageFormButton" type="submit" class="w-100 btn btn-primary">Save</button>

    </form>
</div>
@endsection

@push('script')
<script>
$(document).ready(function() {

var cropper = '';
var valid = false;

var Cropper = window.Cropper;
var URL = window.URL || window.webkitURL;
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);

 var options = {

    viewMode: 1,
    center: false,
    guides: false,
    restore: false,
    dragMode: 'move',
    highlight: false,
    background: false,
    autoCropArea: 0.8,
    zoomOnWheel: false,
    aspectRatio: 1 / 1,
    cropBoxMovable: false,
    cropBoxResizable: false,
    toggleDragModeOnDblclick: false,

    ready: function (e) {

        var cropper = this.cropper;
        var zoomSlider = '';
        var leftPosition = '';
        var leftPositionRounded = '';

        const canvasData = cropper.getCanvasData();
        const containerData = cropper.getContainerData();

        zoomSlider = (canvasData.width / canvasData.naturalWidth) * 0.8;

        cropper.setCropBoxData({ left: 162.5, top: 37.5, width: 300, height: 300 });

        var zoomSliderRounded = parseFloat(zoomSlider.toFixed(4));

        cropper.zoomTo(zoomSliderRounded);

        $("#zoom-slider").slider("option", "max", 2);
        $("#zoom-slider").slider("option", "min", zoomSliderRounded);
        $("#zoom-slider").slider("value", zoomSliderRounded);

    },

    crop: function (e) {
        var data = e.detail;

        // These values are required on Server for cropping
        var json = [Math.round(data.width), Math.round(data.height), Math.round(data.x), Math.round(data.y)].join();
        $('#cropped_value').val(json);

    },

    // zoom: function (e) { console.log(e.type, e.detail.ratio); }

};

cropper = new Cropper(image, options);
var uploadedImageType, uploadedImageName, uploadedImageURL;


// Import image
var userImage = document.getElementById('userImage');

if (URL) {
  userImage.onchange = function () {
    var files = this.files;
    var file;
    valid = false;

    if (cropper && files && files.length) {
        file = files[0];

        if (/^image\/\w+/.test(file.type)) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                var img = new Image();
                var imgwidth = imgheight = 0;
                var minwidth = minheight = 300;
                img.onload = function() {
                    imgwidth = this.width;
                    imgheight = this.height;
                    if (imgwidth >= minwidth && imgheight >= minheight) {

                        uploadedImageType = file.type;
                        uploadedImageName = file.name;

                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }

                        // Replace url
                        image.src = uploadedImageURL = URL.createObjectURL(file);
                        // Destroy the old cropper instance
                        cropper.destroy();
                        cropper = new Cropper(image, options);
                        userImage.value = null;

                    } else {
                        field_error("userImage", "Minimum Image size must be 300px X 300px!");
                    }
                };
                img.src = evt.target.result;
            };
            reader.readAsDataURL(this.files[0]);
        } else {
            field_error("userImage", "Invalid file type! Please select an image file!");
        }
    } else {
        field_error("userImage", "No file selected!");
    }
  };
} else {
  userImage.disabled = true;
  userImage.parentNode.className += ' disabled';
}

$("#zoom-slider").slider({
    max: 2,
    min: 0,
    value: 0,
    step: 0.0001,
    range: "min",
    animate: "fast",
    orientation: "horizontal",
    slide: function () {
        var currentValue = $("#zoom-slider").slider("value");
        var zoomValue = parseFloat(currentValue);
        cropper.zoomTo(zoomValue.toFixed(4));
    }
});

});

</script>
@endpush

Crome Inspect result

via Chebli Mohamed