Issue with Uploading image file after cropping with cropper.js in Java Springboot

I used cropper.js to crop and image file and upload the image file into backend(java springboot) but everytime it gives the error of 404 eventhough the url exists

 <div class="formPart">
            <div class="image_area" style="height: 100px; width: 100px">
                <label for="upload_image">
                    <img th:src="@{profilePic/default/profile.webp}" id="uploaded_image" class="img-responsive img-circle">
                    <div class="overlay">
                        <div class="text">Click to Change Profile Image</div>
                    </div>
                    <input type="file" name="image" class="image" id="upload_image" style="display:none" accept="image/*"/>
                </label>
            </div>

This is my HTML

$(document).ready(function () {
    var modal = $('#modal');

    var image = document.getElementById('sample_image');

    var cropper;

    var csrfToken = $("meta[name='_csrf']").attr("content");

    $('#upload_image').change(function (e) {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
        var files = e.target.files;

        var done = function (url) {
            image.src = url;

            modal.modal('show');
        };

        if (files && files.length > 0) {
            reader = new FileReader();

            reader.onload = function (e) {

                done(reader.result);

            };

            reader.readAsDataURL(files[0]);
        }

    });

    modal.on('shown.bs.modal', function () {


        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 3,
            preview: '.preview'
        });
    }).on('hidden.bs.modal', function () {

    });
    $('#crop').click(function () {
        canvas = cropper.getCroppedCanvas({
            width: 400,
            height: 400
        });


        $('#uploaded_image').attr('src', canvas.toDataURL("image/png"));
        modal.modal('hide');
    })


//ajax through which i upload the image

    $('#signupForm').submit(function (e) {
        e.preventDefault();

        var email = document.getElementById('Email');
        canvas.toBlob(function (blob) {
            url = URL.createObjectURL(blob);

            var formdata = new FormData();

            formdata.append('image', blob, email.value + '.jpg');

            $.ajax({
                type: "get",
                url: "/profile/upload",
                data: formdata,

// i also tried contentType: false over here
                contentType: 'application/json',
                processData: false,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                },
                success: function () {

                    var form = document.getElementById('signupForm');

                    form.submit();

                }
            });



        }, 'image/jpeg', 0.9);

    });


});

This is my js file

     @GetMapping("/profile/upload")
     @ResponseBody
        public void uploadProfilePic(@RequestParam("image") MultipartFile file,
                                               HttpSession session) throws IOException {
         log.info("inside profile picture uploading not inside file is empty");
         if (!file.isEmpty()) {
             String fileName = StringUtils.cleanPath(file.getOriginalFilename());
             log.info("inside profile picture uploading");

             String upload = "lenscraft/src/main/resources/static/profilePic";

             FileUploadUtil.saveFile(upload, fileName, file);

             session.setAttribute("fileName", fileName);

         }
     }

And this is the backend code.

I tried this and many other ways including just passing the image as an object but it does not seem to work. I want to know any ways how i can crop the image and upload it into the backend.

The url used in ajax is not complete. You need to provide the full url like below:

$.ajax({
            type: "get",
            url: "http://localhost:8080/profile/upload",
            data: formdata,